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

Question

我正在使用 jscroll 插件无限滚动和 jQuery lazyload 插件 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

我认为这是因为 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"
         })
    }
  });
});

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

Lazyload not working with infinite scroll

javascript

jquery

infinite-scroll

jquery-lazyload