1

私は大量の画像を含む Web サイトを持っているので、ajax で無限スクロールを作成し、lazyload プラグインも使用しています: http://www.appelsiini.net/projects/lazyload

私の問題は次のとおりです。画像をロードするためにfadeIn効果を​​使用したいのですが、これは最初の画像セットをロードするときは問題ありませんが、「もっと読み込む」をクリックすると、すでに表示されている画像と表示されている画像にfadeIn効果が適用されます現在ロード中です。そのため、すでに読み込まれている画像は消えて、fadeIn 効果で表示されます。

現在ロード中の画像のみにフェードイン効果を適用する方法は?

これは私が画像をロードする方法です：

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

        });
    });
4

1 に答える 1

1

ajax 成功メソッドの外で lazyload プラグインを設定してみてください。一度設定すればいいと思います。 

$("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");
         ...
    });
});
于 2014-08-31T12:59:26.473 に答える