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