测试是否已加载所有图像

Question

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

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;