Question

你好我的something.onload有问题。我想要显示3张图片，只要它已经加载。首先，我将每个图像的容器放入opacity = 0，每当它已经加载时，我将把数字改为1.

my_array.index(4)

当我运行该代码时，只显示最后一张图像。当我检查每个图像时，只有最后一个图像具有不透明度= 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);
  });
}

Answer 2

这是闭包的典型案例。

以下是您的案例： 你的for循环将同步执行，onload事件将由javascript使用事件队列处理。

从技术上讲，你的for循环完成执行，然后执行事件队列中的任何事件。因此它只运行i =最后一次迭代

要解决此问题，您需要将您的函数设为IIFE，并返回执行所需操作的函数：

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

   }
}

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

2 个答案: