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张图片。

我怎样才能淡化这些？还有一种方法可以打印出手动写入的循环中的所有图像，因此用户不必经过并确保每个图像标记都正确命名？（我已经有一个批量图像重命名器）

我发现 This 与我需要的相似，但我无法弄清楚如何让它按照我想要的方式加载。感谢

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开始），因此第一张图像立即淡入（一旦全部加载），第二个延迟400毫秒（通过.delay()），所以它在第一个完成后消失，第三个在此之后消失，等等。如果你想要慢化，比如每个1秒，只需通过那两个函数都是这样的：

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

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

1 个答案: