Question

我有幾個圖片奇怪的結果，每個圖像的寬度爲1400px，我想負荷後的所有圖像，所有圖像的警報和寬度，這是我的代碼：

var images = new Array("0.jpg", "1.jpg", "2.jpg"); 

for (var i = 0; i < images.length; i = i + 1) { 
    $("#img_place").append("<img src='" + images[i] + "'>"); 
} 


var loadedImgsCount = 0; 
var imgTotalWidth = 0; 

for (var i = 0; i < images.length; i = i + 1) { 

    var currImg = new Image(); 
    currImg.src = images[i]; 
    currImg.onload = function() { 
     loadedImgsCount = loadedImgsCount + 1; 
     imgTotalWidth = imgTotalWidth + currImg.width; 
    } 

} 


interv = setInterval(function() { 
    if (images.length === loadedImgsCount) { 
     alert(imgTotalWidth); 
     clearInterval(interv); 
    } 
}, 500); 

和在HTML：

<div id="img_place"> 
</div> 

該代碼例如是用於3圖像，問題是：在鉻和Safari，從該代碼導致有時不正確的：有時1400，有時2800但有時正確：4200 。 在opera和firefox中總是預期：4200. 請告訴我，我哪裏有錯誤？爲什麼我的代碼在Safari瀏覽器中運行並且Chrome不正確？

Answer 1

反過來做：

currImg.onload = function() { 
    loadedImgsCount = loadedImgsCount + 1; 
    imgTotalWidth = imgTotalWidth + currImg.width; 
}; 
currImg.src = images[i]; 

你的問題是，當圖像是在緩存中，因爲你設置的onload回調之前生成load事件onload功能可能不會被調用。

作爲一個側面說明，它通常這樣做是爲了增加一個變量：只要寬度屬性不是硬編碼

loadedImgsCount++; 

Answer 2

，我寧願檢查圖像的寬度，以確定是否它被加載。這可以避免緩存問題。

var 
images = ["0.jpg", "1.jpg", "2.jpg"], 
images_place = $("#img_place"), 
images_loaded_interval = setInterval(function() { 
    var total_width = 0; 

    for (var i = 0; i < images.length; i++) 
     if($('img',images_place).eq(i).width()*1 == 0) return; 
     else total_width += $('img',images_place).eq(i).width()*1; 

    alert(total_width); 
    clearInterval(images_loaded_interval); 

}, 500); 

for (var i = 0; i < images.length; i++) 
    images_place.append("<img src='" + images[i] + "'>");