多个图像上的 Javascript image.onload 仅适用于最后一个图像

Question

你好，我对 something.onload 有疑问。我想显示 3 张图像，只要它已经加载。首先，我会将不透明度 = 0 的每个图像的容器放在一起，只要它已经加载，我就会将数字更改为 1。

// HTML
<div class="img-container" data-src="imgurl1">
</div>
<div class="img-container" data-src="imgurl2">

</div>
<div class="img-container" data-src="imgurl3">

</div>


// CSS
.img-container{
 opacity:0;
 width:100%;
}
.loaded {
 opacity:1;
}

// JS
window.onload = function(){
   var container= document.querySelectorAll('img-container');
   for(var i=0;i<container.length;i++){
      var temp = container[i];
      var img = Image();
      img.src = temp.dataset.src;
      img.onload = function(){
         temp.classList.add('loaded');  
      };
      temp.appendChild(img);
   }
}

当我运行该代码时，只显示最后一张图片。当我检查每张图片时，只有最后一张不透明度 = 1 的图片(已成功添加类加载)，而另一张图片的不透明度仍然为 0。

我是否遗漏了一些 JS 概念？提前致谢!!!

Answer 1

使用 Array#forEach 因为 for-loop 不会为变量创建范围，因此变量将在迭代后被覆盖并作为 onload是异步的，只有最后一张图片会受到影响。

window.onload = function() {
  var container = document.querySelectorAll('img-container');
  [].forEach.call(container, function(temp) {
    var img = Image();
    img.src = temp.dataset.src;
    img.onload = function() {
      temp.classList.add('loaded');
    };
    temp.appendChild(img);
  });
}