jQuery延迟加载插件对加载的图像应用效果

Question

我有一个包含大量图片的网站，因此我使用 ajax 创建了无限滚动，并且我正在使用延迟加载插件：http://www.appelsiini.net/projects/lazyload

我的问题是：我想使用淡入淡出效果来加载图像，当我加载第一组图像时这很好，但是当我点击“加载更多”时，淡入淡出效果应用于那些已经可见的图像并且到当前正在加载的那些。 因此，那些已经加载的图像消失并以淡入淡出效果出现。

如何仅对当前正在加载的图像应用淡入淡出效果？

这是我加载图像的方式：

$(".loadMore").click(function(){
        ... some validation
        $.ajax({
            type: "POST",
            url: "/loadMore/"+option+"/"+posts,
            dataType: "json",
            beforeSend: function(){
                t.html(lang.loading);
            },
            success: function(data){
                t.html(lang.loadMore);
                for(var i in data.posts.id){
                    append(data.posts.id[i], data.posts.countComments[i], data.posts.image[i], data.posts.title[i], data.posts.link[i], data.posts.username[i], data.posts.date[i], data.posts.new_tab[i], data.posts.is_saved[i], false);
                }

                if(data.msg == "stop"){
                    t.hide();
                }
                $("img.lazy").lazyload({skip_invisible : false,failure_limit : 15, effect: "fadeIn"});
            }

        });
    });

Answer 1

尝试在 ajax 成功方法之外设置延迟加载插件。我相信你只需要设置一次。

$("img.lazy").lazyload({skip_invisible : false,failure_limit : 15, effect: "fadeIn"}).removeClass("lazy");

$(".loadMore").click(function(){
    ... some validation
    $.ajax({
         ...
             $("img.lazy").lazyload(
                 {
                     skip_invisible : false,
                     failure_limit : 15, 
                     effect: "fadeIn"
                  }).removeClass("lazy");
         ...
    });
});