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

Using javascript to load/unhide images one at a time?

本文关键字：隐藏 图像 一个 取消 一次 javascript 使用 加载      更新时间：2023-09-26

我正在尝试制作一个我认为简单的函数。我所要做的就是加载图像，我把其中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>

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

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)
}

我想我知道这里出了什么问题，归根结底是理解闭包。。。但我可能误解了你的问题。您谈到了加载图像，对我来说，这意味着您正在动态地生成新图像（通过new Image()），然后动态地设置它们的src属性（从而导致HTTP请求对它们进行festch）。这是另一个问题，我将假设您的问题是由于关闭造成的。

问题是，当1000ms触发点首次触发时，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
相关文章：