Görüntülerin yüklü olup olmadığını kontrol edin?

Question

Tüm resimlerin bir görüntü kaydırıcısında/döndürücüsünde kullanılmadan önce yüklenip yüklenmediğini kontrol eden bir kasılma arıyorum. Kullanıcının indirilmediği bir görüntüyü tıklatmasını önlemek için ana resimler yüklendiğinde yalnızca görüntülerin düğmelerini veya küçük resimlerini gösteren bir çözüm düşünmekteydim.

Answer 1

.ready jQuery dokümanlardan metin load ve daha net ready arasında ayrım yapmak yardımcı olabilir:

JavaScript sayfa işlendiğinde kod çalıştırmak için yük olay sağlarken, bu olay yapar Görüntüler gibi tüm varlıklar tamamen alınana kadar tetiklenmez. Çoğu durumda, betik DOM hiyerarşisi tamamen oluşturulduktan sonra çalıştırılabilir. İşleyiciye geçildiğinde .ready(), DOM hazır olduktan sonra çalıştırılacağı garantilenir, bu nedenle diğer tüm olay işleyicileri eklemek ve diğer jQuery kodunu çalıştırmak için genellikle en iyi yerdir.

... ve gelen .load dokümanlar: Bu ve tüm alt unsurları tamamen yüklenmiş edildiğinde

yük olay bir öğesi gönderilir. Bu etkinlik bir URL ile ilişkilendirilmiş herhangi bir öğeye gönderilebilir: resimler, komut dosyaları, çerçeveler, iframe'ler ve pencere nesnesi.

.load, sizin için uygun olanıdır. Bu etkinlikle ilgili harika olan şey, onu DOM’ın yalnızca bir alt kümesine ekleyebileceğinizdir. Diyelim ki böyle bir div slayt görüntüleri var diyelim:

<div class="slideshow" style="display:none"> 
    <img src="image1.png"/> 
    <img src="image2.png"/> 
    <img src="image3.png"/> 
    <img src="image4.png"/> 
    <img src="image5.png"/> 
</div> 

... o zaman bir kez kap içinde tüm resimleri tetiklemek için sadece .slideshow kabın üzerine .load kullanabilirsiniz diğer bakılmaksızın yüklenmiş sayfadaki resimler.

$('.slideshow img').load(function(){ 
    $('.slideshow').show().slideshowPlugin(); 
}); 

(Ben sadece bir örnek olarak bir display:none koydu. Onlar yük iken görüntüleri gizlemek olacaktır.)

Güncelleme (03.04.2013)
Bu yöntem jQuery Version 1.8 beri kullanımdan kaldırıldı

Answer 2

Tüm resimlerin yüklenip yüklenmediğini kontrol etmek yerine, her zamanki gibi $(document).ready() yerine $(window).load() olayını kullanarak kaydırıcıyı/yönlendiriciyi neden oluşturmuyorsunuz? $(window).load(), sayfanın yüklenmesinden önce resimler gibi kaynaklar da dahil olmak üzere yüklemeyi bitirmesini bekler.

Bakın: window.onload vs. body.onload vs. document.onready (Yığın Taşması Üzerine de).

Answer 3

$('img').load() etkinliğinin her birini kapatabilir ve ilgili bağlantı/tıklama olayını yalnızca yükünüz tetiklendiğinde etkinleştirebilirsiniz. Görüntüye göre görüntü yapmanın avantajı, belirli görüntülerin yüklenmesi daha uzun sürüyorsa, hızlı olanların 'tıklanabilir' olmasına izin verebilirsiniz.

$('img').load(function() { 
    // find the related link or click event and enable/add it 
});