的jQuery插件lazyload應用效果上加載的圖像

Question

我有噸圖片的網站，所以我創建了AJAX的無限滾動的，也是我正在使用lazyload插件：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

嘗試將lazyload插件的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"); 
     ... 
    }); 
});