js图像加载的奇怪结果，在safari和chrome中答案

【问题标题】：strange result from js image load, in safari and chromejs图像加载的奇怪结果，在safari和chrome中
【发布时间】：2012-08-28 15:13:21
【问题描述】：

我有几张图片，每张图片的宽度是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 张图像，问题是：在 chrome 和 safari 中，此代码的结果有时不正确：有时 1400，有时 2800，但有时正确：4200。在 Opera 和 firefox 中，结果总是期望：4200。请告诉我哪里出错了？为什么我的代码在 safari 和 chrome 中不正确？

【问题讨论】：

为什么要使用 setInterval ？你可以把它的代码放在onload中。
总是使用数组字面量，从不使用new Array。 var images = ["0.jpg", "1.jpg", "2.jpg"];
你知道，loadedImgsCount++ 比loadedImgsCount = loadedImgsCount + 1 要短很多。与imgTotalWidth = imgTotalWidth + currImg.width 相同：imgTotalWidth += currImg.width。

标签： javascript jquery image load

【解决方案1】：

反过来：

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

您的问题是，当图像在缓存中时，onload 函数可能不会被调用，因为load 事件是在您设置onload 回调之前生成的。

附带说明，通常这样做是为了增加一个变量：

loadedImgsCount++;

【讨论】：

【解决方案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] + "'>");

【讨论】：