Question

我有一个包含许多图像的图库页面，我想逐个加载，或者至少给人一种逐渐淡化的错觉。

我想出了这个：

 $(".fadeInImage").hide();

var counter = 0;
$(".fadeInImage").each(function() {
    counter = counter + 50;
    fade_in(this,counter);

});
function fade_in(obj,counter)
{
    $(obj).bind("load", function () { $(this).delay(counter).fadeIn(); });  
}

这很可爱，如果没有js，也可以正常加载图像。但是，我的问题是，因为我不是jQuery的专家，你能预见到任何问题吗？有更好的方法吗？

提前致谢！

Answer 1

对我来说很好看。虽然你可以将它简化为类似的东西 - 记得在窗口上使用加载事件，因为加载图像需要多长时间的不可预测性：

$(document).ready(function() {
    $('.fadeInImage').hide();
});

$(window).load(function() {
    $(".fadeInImage").each(function(i) {
       $(this).delay((i + 1) * 50).fadeIn();
    });
});

Answer 2

您不能保证图像按照它们在HTML中出现的顺序加载（特别是如果它们的大小不同），那么您可能无法获得平滑的淡入淡出过渡。你可以使用窗口的加载事件让它们在一切就绪时淡入：

$(".fadeInImage").hide();

$(window).load(function () {
    var counter = 0;
    $(".fadeInImage").each(function() {
        counter = counter + 50;

        $(this).delay(counter).fadeIn();
    });
});

Answer 3

我认为这种方式会更准确：

var $imgs = $(".fadeInImage").hide();

function fadeOneByOne(i){
   if(i >= $imgs.size()) return;
   $imgs.eq(i).fadeIn(function(){ fadeOneByOne(i+1); })
}

fadeOneByOne(0);

使用jQuery交错淡入图像

3 个答案: