Question

我在这里得到了代码像这样的数组var pics = ['1.jpg'，'2.jpg'，'3，jpg'];

循环遍历数组

var j = 0; 
var(var i in pics){ 
$(document.createElement(img)).attr('src',pics[i]).load(function(){
    alert(pics[i]+'is loaded');
    j++;
})}

if(j == pics.length){
alert('fully loaded');}

但我得到的只是3，jpg一直在加载，怎么解决这个？我哪里错了？

Answer 1

那是因为.load事件是异步触发的。在继续执行脚本之前，JavaScript不会等待加载所有图像，因此每次加载图像时都需要执行测试。我的代码也更具可读性。

var len = pics.length;
var loadCounter = 0;
for(var i = 0; i < len; i++) {
    $(document.createElement(img)).attr('src', pics[i]).load(function() {
        alert(pics[i] + 'is loaded');
        loadCounter++;
        if(loadCounter === len) {
            alert("all are loaded");   
        }
    });
}

旁注：使用for...in遍历数组会产生令人讨厌的结果。特别是，它将包含Array的所有属性，因此，简而言之，不要这样做 :) See for yourself.

另一方面，当缓存图像时，某些浏览器中的加载事件可能不会触发。要避免此问题，您可以在每个设置了.load属性的图像上手动触发complete事件。

var len = pics.length;
var loadCounter = 0;
for(var i = 0; i < len; i++) {
    $(document.createElement(img)).attr('src', pics[i]).one("load", function() {
        alert(pics[i] + 'is loaded');
        loadCounter++;
        if(loadCounter === len) {
            alert("all are loaded");   
        }
    }).each(function() {
        if(this.complete) $(this).trigger("load");
    });
}

Answer 2

您需要调整i变量的范围以保留循环中的当前值。

var j = 0; 

for( var i = 0; i < pics.length; i++ ){ 
    addHandler( i );
}

function addHandler( this_i ) {

    $(document.createElement( 'img' )).attr('src',pics[i]).load(function(){
        alert(pics[this_i]+'is loaded');
        j++;

        if(j == pics.length){
            alert('fully loaded');
        }
    });

}

如何检查一组imgs已完全加载

2 个答案: