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

我在这里得到了一个像这样的数组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所有属性，所以简而言之， 不要这样做 🙂 看看你自己。

另一件事，当缓存图像时，某些浏览器中的加载事件可能不会触发。 要避免此问题，您可以在每个具有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'); } }); }