javascript - 延迟加载不适用于无限滚动

Question

我正在使用用于无限滚动的 jscroll 插件和 jQuery 延迟加载插件 https://www.appelsiini.net/projects/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();
        }
    });
});

问题：

延迟加载插件工作正常，直到我向下滚动到页面末尾并且无限滚动加载新页面。加载新页面时，图像不显示。

Answer 1

我相信这是因为延迟加载插件无法访问无限滚动插件提供的新元素。

因此，在无限滚动插件的回调中，重新初始化延迟加载将有助于它识别新图像。

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