將圖像添加到DOM，然後等待他們來加載

Question

這是一個簡單的問題..

我得到一個播放列表，然後我想每個圖像加載到DOM *有影片。

因此，所有媒體完成加載後，我想能夠調用一些功能。

但在下面的情況下，部分console.log("loaded + images")被立即調用，因爲DOM已加載，並在此之後的圖像被添加。我該怎麼做才能告訴我所有這些圖像何時加載？

 <script type="text/javascript"> 
      _.each(playlist, function(el) { 
       $(".hidden").append("<img src='"+ el.path +"''>") 
      }); 
    </script> 
    <script type="text/javascript"> 
     $(window).ready(function() { 
      console.log("loaded + images") 
     }); 
    </script> 

Answer 1

您可以添加一個load方法動態創建的圖像，這樣，當圖像完成加載，你能趕上這一點。

例如

var img = $('<img />', { attr: { src: el.path }}).load(function(){ 
    // your code here 
})); 
$(".hidden").append(img); 

有了這個，你可以擁有一個全局計數來檢查你擁有的圖像數量。當全球加載的圖片數量與圖片總數相匹配時，您可以撥打console.log("loaded + images");代碼。

我已經放在一起jsFiddle here所以你可以看到它的行動。