Lazyload not working with infinite scroll

I am using a jscroll plugin for infinite scroll and jQuery lazyload plugin https://www.appelsiini.net/projects/lazyload

Lazyload:

 $(function() {
     $("img.lazy").lazyload({
         effect : "fadeIn",
  });
});

Infinite Scroll:

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

Problem:

The lazy load plugin works fine till I scroll down to the end of the page and a new page gets loaded with infinite scroll. When the new page is loaded, the images do not show up.

I believe this is because lazyload plugin is not able to access the new elements provided by the infinite scroll plugin.

So in the callback of your infinite scroll plugin having lazyload re-initialized would help it identify the new images.

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