Lazyload無限スクロールで

Question

を働いていない私は、無限スクロールとjQueryのlazyloadプラグイン用のjscrollプラグインを使用しています https://www.appelsiini.net/projects/lazyload

Lazyload：

$(function() { 
    $("img.lazy").lazyload({ 
     effect : "fadeIn", 
    }); 
}); 

無限スクロール：

$(function() { 
    $('ul.pagination').hide(); 
    $("img.lazy").lazyload(); 
    $('.scroll').jscroll({ 
     loadingHtml: '<div class="text-center"><img src="{{ URL::asset('frontend/img/loading.gif') }}" alt="Loading.." /> Loading..</div>', 
     autoTrigger: true, 
     nextSelector: '.pagination li.active + li a', 
     contentSelector: 'div.scroll', 
     callback: function() { 
      $('ul.pagination').remove(); 
     } 
    }); 
}); 

Proble m：

遅延ロードプラグインは、ページの最後までスクロールし、新しいページが無限のスクロールで読み込まれるまでうまく動作します。新しいページが読み込まれると、イメージは表示されません。

Answer 1

これは、lazyloadプラグインが無限スクロールプラグインによって提供される新しい要素にアクセスできないためです。

したがって、lazyloadを再初期化した無限スクロールプラグインのコールバックでは、新しい画像を識別するのに役立ちます。

$(function() { 
    $('ul.pagination').hide(); 
    $("img.lazy").lazyload(); 
    $('.scroll').jscroll({ 
    loadingHtml: '<div class="text-center"><img src="{{ URL::asset('frontend/img/loading.gif') }}" alt="Loading.." /> Loading..</div>', 
    autoTrigger: true, 
    nextSelector: '.pagination li.active + li a', 
    contentSelector: 'div.scroll', 
    callback: function() { 
     $('ul.pagination').remove(); 
     $('img.lazy').lazyload({ 
      effect: "fade-in" 
     }) 
    } 
    }); 
});