使用javascript一次加载/取消隐藏图片？

Question

我正在尝试使我认为是简单的功能。 我要做的就是加载图像，我将其中7幅图像插入到HTML正文中，以使其在页面加载时不显示。 但是然后我希望他们将它们按1加载到页面1（因此每秒将加载1）。 就像我在上面写的一样，我在每个图像标签中都有一个id属性，该属性将与下面数组中的图像名称相对应。 这是我的代码：

  <script type="text/javascript">
      window.onload = function() {
        var images = ["imt","drpepper","principal","grinnell","keyot","vonmaur","thanks"];
        for (i=0; i<images.length;i++){
            var image = document.getElementById(images[i]);
            setTimeout(function(){image.style.visibility = "visible";}, 1000);  
        }
    }
  </script>

我已经为此工作了几个小时。 我不明白为什么它不起作用。 请帮忙！

Answer 1

jsFiddle Demo

在setTimeout内部使用变量的问题是，它将使用i的最后一个值。 结果是仅显示最后一张图像。 为了使其存储i的值，您需要关闭该值。 这可以通过立即执行的函数表达式来完成

for (var i=0; i<images.length;i++){
 (function(i){
  var image = document.getElementById(images[i]);
  setTimeout(function(){
    image.style.visibility = "visible";
  }, 1000);  
 })(i)
}

Answer 2

我想我知道这里有什么问题，可以归结为了解闭包……但我可能误解了您的问题。 您谈论的是加载图像，对我而言，这意味着您正在动态生成新图像（通过new Image() ），然后动态设置其src属性（从而导致HTTP请求对其进行festch）。 我要假设您的问题是由于关闭而回答的，这是另一回事。

问题在于，当首次触发1000 ms触发点时， image的值将是根据数组中的最后一个ID字符串名称获取的最后一个元素。 您需要以下代码：

...other code same as before
for (i=0; i<images.length;i++){
    (function() {
        var image = document.getElementById(images[i]);
        setTimeout(function(){image.style.visibility = "visible";}, 1000); 
    })();
}
...other code same as before