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

问题：

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

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无法使用无限滚动

1 个答案: