使用jQuery交错淡入图像

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();
    });
});