加载页面后图像逐个淡入

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 中。