如果所有的图像加载测试(Test if all images are loaded)

这是我在测试是否所有的图像加载能力的尝试：

for (var i = 0; i < imgCount; i ++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src='img'+i+'.png'
    imgArr[i].onload = function() {
        loadArr[i] = true //but wait! At the end of
                          //the loop, i is imgCount
                          //so this doesn't work.
    }
}

问题是，一旦循环完成，变量i是imgCount 。 这意味着所有其他的“装”的标志永远不会设置为true的图像加载时。

是否有某种方式为“装”属性添加到图像，或者是有一些解决此问题的？

Answer 1:

你需要使用闭包来定义的onload功能：

for (var i = 0; i < imgCount; i ++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src='img'+i+'.png'
    imgArr[i].onload = (function(i){
        return function(){ loadArr[i] = true }
    })(i);
}

这里有一个的jsfiddle这表明在类似的情况下这方面的工作。

此外，请注意您当前选择的解决方案，回答不实际工作：

imgArr[i].onload = (function() {
        loadArr[i] = true;
    })();

此功能会立即进行评估。 这意味着，在该循环中，loadArr的每个元素被设置为true为是onload事件。 该代码是功能上等同于：

imgArr[i].onload = loadArr[i] = true;

Answer 2:

你必须索引值传递给这样的匿名函数，

for (var i = 0; i < imgCount; i++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src = 'img' + i + '.png'
    imgArr[i].onload = function (index) {
        return function () {
            loadArr[index] = true //but wait! At the end of
            //the loop, i is imgCount
            //so this doesn't work.
        };
    }(i);
}

Answer 3:

这就是为什么倒闭作了！ 你的循环运行几乎是瞬间，并装在第一图像之前结束长。 所以我== imgCount向右走，“跳过”所有其他值。 盖可避免这一点，我的每一个值影响到不同的图像。

然而，在你的情况，我的确会增加一个“装”属性每个图像。

// Construct your image array
for (var i = 0; i < imgCount; i++) {
    imgArr[i] = new Image();
    imgArr[i].src='img'+i+'.png';
}

//Then iterate over the array, adding a 'loaded' attribute when it occurs
imgArr.each(function(){
    $(this).onload(function() {
        $(this).attr('loaded','true');
    });
}

文章来源: Test if all images are loaded