Chrome/Safari圖像加載器，首次開放

Question

構建我自己的圖像滑塊，在Firefox中完美運行。然而，在Chrome/Safari中，第一次打開頁面時，圖像往往無法加載。 （如果您刷新一切都很好）

var count = $("#show-image img").size(); 
var img = $("#show-image img"); 
$(document).ready(function() { 
for(i=0;i<count;i++){ 
    var width = img[i].width; 
    var height = img[i].height; 
    $(img[i]).css({"width": width, "height": height}); 
    console.log(img[i].width); 
} 
}); 

在Chrome和Safari，第一次頁面加載某些圖像所得到的高度和寬度設置爲0px。我假設因爲圖像尚未完全加載。

如何在頁面實際完全加載時運行代碼？

Answer 1

作爲一種快速簡單的解決方案，請使用.load()。

一個更好的解決辦法是使用this jQuery plugin：

$(document).ready(function() { 
    $('#show-image').imagesLoaded(function() { 
     /* your code here */ 
    }); 
}); 

好處是，你只需要等待加載那些特定的圖像，而不是一切，你會爲​​。