Lazyload無法用無限滾動

Question

工作我使用的是jscroll插件無限滾動和jQuery lazyload插件 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" 
     }) 
    } 
    }); 
});