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

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{display: none;}

然后使用:

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

通过使用窗口加载，您的所有图片都将加载到内存中，并且可以与下载速率分开显示...如果您想优化页面，您可能会考虑使用惰性加载脚本...