Question

好的，这是我目前的工作代码......

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

加载窗口后，它会完美地逐个淡入一张图像。但在我的页面上，我有一个链接，调用一个html文件，其中包含更多的图像到div。这个脚本只是在加载时一个接一个地淡化图像，导致一半的图像逐渐消失...

所以我想要的是当文档准备就绪时，它会加载所有图像，然后将它们淡入。

我需要使用jQuery(document).ready(function()来启动脚本，所以.bind('load')是有序的...我想...我在这方面很新......

这就是我想出来的，但它不起作用..也许有人可以告诉我为什么......

$(document).ready(function() {
     $("#scroller li").each(function(i) {
          $(this).bind('load', function(){
               $(this).delay(400*i).fadeIn();
          });
      });
  });

Answer 1

加载已经发生，因为$（document）.ready等待整个页面的内容加载后再触发函数。

您是否已尝试将li或li设置为隐藏，然后执行此操作：

$(document).ready(function() {
     $("#scroller li").each(function(i) {
           $(this).delay(400*i).fadeIn();
      });
  });

Answer 2

听起来你想要预装图像。如果图像是预加载的，它们将被缓存，因此当您第一次显示它们时，应显示整个图像而不是被剪切掉。您只需使用`$（“”）。attr（'src'，'source / of / image'）预加载图像;这会将图像加载到内存中，并应提前缓存它们。它不会将它们附加到DOM。

加载AFTER页面后，逐个淡入图像

2 个答案: