如何检查一组imgs是否已满载

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.

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

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');
        }
    });

}