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

Проблема:

Плагин отложенной загрузки работает хорошо, пока я не прокручиваю вниз до конца страницы, и новая страница загружается с бесконечной прокруткой. Когда новая страница загружена, изображения не отображаются.

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