加载后,在secquence中淡入多个图像

Question

我想要实现的是一个图像网格(10x10),首先在页面的其余部分完成加载后加载,然后在1个接一个地淡入

即(仅代表一行)

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

等...到目前为止,我所拥有的是:

<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()代码.任何动画的默认持续时间是400ms,并且在.each()循环中i是元素的索引(从0开始),因此第一个图像立即淡入(一旦全部加载),第二个图像延迟400ms(通过.delay()),所以它第一个完成时会消失,之后会消失,等等.如果你想要慢一点,比如说每个1秒,那就把它传递给两个函数,如下所示:

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