加载多个图像后按顺序淡入它们

Question

我想要实现的是一个图像网格（10x10），首先在页面的其余部分完成加载后加载，然后在一个又一个之后淡入，

即 （仅代表一行）

----------
+---------
++--------
+++-------
++++------

等等... 到目前为止我所拥有的是这样的：

<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;
  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('0','images/0.jpg');
</script>

使用这个图像标签

<img class="fade" name="0" onLoad="LoadImage('1','images/1.jpg')" />

这给了我一半的解决方案，因为它按顺序加载所有图像，但我似乎无法为这些图像添加淡入淡出。图像设置在 UL 中，每个 LI 中有 10 张图片，总共 10 个 LI = 100 张图像。

我怎样才能淡入这些？ 还有一种方法可以循环打印所有图像，而不是手动写入它们，这样用户就不必仔细检查并确保每个图像标签都正确命名？ （我已经有了一个批量图像重命名器）

我发现这个 这与我需要的类似，但我无法弄清楚如何让它按我想要的方式加载。 谢谢

Answer 1

除了您拥有的之外，您还可以这样做，保持标记简单：

<img class="fade" name="0" src="images/1.jpg" />

然后在 CSS 中最初将它们隐藏：

.fade { display: none; }

然后在页面加载您需要按顺序显示它们的所有脚本是这样的：

$(window).load(function() {
  $(".fade").each(function(i) {
    $(this).delay(400*i).fadeIn();
  });
});

window.onload 与 document.ready 不同，它会等待所有图像都加载完毕，因此只需将该事件用于您的 .fadeIn() 代码。任何动画的默认持续时间均为 400 毫秒，并且在 .each() 中循环i是元素的索引（从0开始），因此第一个图像立即淡入（一旦所有图像加载完毕），第二个图像延迟400ms（通过.delay())，因此当第一个完成时它会消失，之后是第三个，依此类推。如果您想减慢速度，例如每次 1 秒，只需将其传递给两个函数，如下所示：

$(this).delay(1000*i).fadeIn(1000);