Question

我正在使用这个jQuery代码段在页面加载时逐个产生图片淡入的效果：

jQuery(document).ready(function($) { 

    animatePictures('img');  

});

function animatePictures(selection) {
    elementsToAnimate = jQuery(selection);
    elementsToAnimate.hide().each(function(i) {
    jQuery(this).delay(i * 500).fadeIn(5000);
    });
}

这大致可以解决问题，但正如您所看到的，资产首先被加载，然后在DOM准备就绪时隐藏它们，然后以500毫秒的间隔淡入。

我想知道你是否可以告诉我如何才能正常运行，以便在网站加载时图片真正淡入，并且首先隐藏然后淡入。

我将感谢所有建议。谢谢！

Answer 1

非常简单的解决方案是只使用css：

img{/*select the selector*/
  display: none;
}

Answer 2

首先在你的css中设置你要显示的所有照片：无

img{display: none;}

然后使用：

function animatePictures() {
   jQuery('img').each(function(i) {
      jQuery(this).delay(i * 500).fadeIn(5000);
    });
}
jQuery(window).load(function($) { animatePictures(); });

通过使用窗口加载，所有图片都将加载到内存中，并且可以单独显示而不是下载速率...如果您尝试优化页面，可能会考虑使用延迟加载器脚本...

使用jQuery在页面加载时淡入图片

2 个答案: