JQuery在顯示之前加載div內的所有圖像

Question

我想在實際顯示div之前加載div中的每個圖像。我有一些與此類似：

<div> 

<img src="1.jpg" /> 
<img src="1.jpg" /> 
<img src="1.jpg" /> 
<img src="1.jpg" /> 
<img src="1.jpg" /> 
<img src="1.jpg" /> 

</div> 

一開始我嘗試做這樣的事情：

$('div img').load(function() { 

$('div img').show(); 


}); 

或者這樣：

$('div').find('img').load(function() { 

$('div img').show(); 

}); 

不幸的是，這一次都沒有瀏覽器，因爲工作加載甚至只是一個圖像，它會觸發事件。有關如何首先加載所有內容的任何想法？謝謝！

Answer 1

您可以跟蹤的多少圖像已加載：

var $images = $('div img'), 
    preloaded = 0, 
    total = $images.length; 
$images.load(function() { 
    if (++preloaded === total) { 
     // Done! 
    } 
}); 

Answer 2

試試這個 http://chipsandtv.com/articles/jquery-image-preload

Answer 3

不幸的是，沒有簡單的方法在一個跨瀏覽器兼容的方式來做到這一點。但幸運的是，有2個插件可以使它無痛苦。

退房waitforimages和imagesloaded

然後，你可以這樣做：

$('div').waitForImages(function(){ 
    $(this).find('img').show(); 
}); 

Answer 4

首先，現代的瀏覽器可以執行併發6請求=>請勿在加載時加載如此多的圖像。如果你有很多圖片，你可以將圖片設置在後面的'src =「'''或非設置」src「屬性中，並且在第一張圖片加載後設置。

第二，你可以通過使用

document.getElementById('#imageId').complete == !0 

您可以檢查具有最大尺寸的圖像或DOM中的最後一張圖像，以確保其他圖像已加載。

希望它能幫助你。

Answer 5

這爲我工作：

$(document).ready(function() { 
    $('#div with images').hide(); 
}); 

$(window).load(function() { 
    $('#div with images').show(); 
});