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请求将它们展开）。这是一个不同的问题，我将回答假设您的问题是由于闭包造成的。

问题在于，当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

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

2 个答案: