在safari和chrome中，js图像加载产生了奇怪的结果

strange result from js image load, in safari and chrome

本文关键字：产生了 加载 结果 图像 js safari chrome      更新时间：2023-09-26

我有几个图像，每个图像的宽度是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。在歌剧和萤火虫中，结果总是意料之中的：4200。请告诉我，我哪里出错了？为什么我的代码在safari和chrome中工作不正确？

执行相反操作：

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

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

顺便说一句，通常这样做是为了增加一个变量：

loadedImgsCount++;

只要宽度属性不是硬编码的，我更喜欢检查图像的宽度，以确定是否加载了它。这样就避免了缓存问题。

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] + "'>");
相关文章：