Inifinite scroll and lazy load

[chadlly2003]

Zencart 1.5.6

I am using a module called infinite scroll.
https://zucando.com/zen-cart-modules...nfinite-scroll

All seems to work well. The only issue I have is that I use lazy loader for images. Everything loads fine for the first page. For some reason when I scroll to the bottom and it reloads the infinite scroll the lazy load images do not appear.

How do I make the lazy load refire while using Ajax scrolling pagination?

Below is the Jquery_Scrolling_pagination.js file. I believe this is what i have to edit. If someone could assist me or lead me in the right direction on solving this issue i would greatly appreciate it.

 jQuery(document).ready(function(){
  var nextlink = jQuery('#productsListingListingBottomLinks a.nextpage');
  
  //get the offset top of the element
  var nextQueryPosition = '';
  if(nextlink.offset() !== undefined) {
	var nextQueryPosition = parseInt(nextlink.offset().top); 
  }
  
  var products = '';
  var positionToQuery = parseInt(jQuery('#ajax_scrolling_pagination_query_position').text());
  
  function queryProducts(nextlink, products) {
    
    if (typeof nextlink.attr('href') !== 'undefined') {
    
      var loading = true;
      jQuery(window).scroll(function() { //when window is scrolled
        //console.log('start: '+ jQuery('.wp-index-pagination a').attr('href'));
        //console.log(jQuery(window).scrollTop());
        if((jQuery(window).scrollTop() + $(window).height() >= $(document).height() -600) && loading == true) {
          if (window.console) console.log('Processing URL: '+nextlink.attr('href')); //position of the ele w.r.t window
          loading = false;
          jQuery.ajax({
            url: nextlink.attr('href'),
            beforeSend: function(){
              jQuery(jQuery('#ajax_scrolling_pagination_append_loading_image').text()).append('<p class="listing-image-loading" align="center"><img src="./images/ajax-circle-loader.gif" /></div>');
            },
            success: function(data) {
            
              products = jQuery(data).find(jQuery('#ajax_scrolling_pagination_append_loaded_products').text()).html();
              jQuery(jQuery('#ajax_scrolling_pagination_append_loaded_products').text()).append(products);
              
              // Reset variables
              var products = '';

              nextlink = jQuery(data).find('#productsListingListingBottomLinks a.nextpage');
              positionToQuery += parseInt(jQuery('#ajax_scrolling_pagination_query_position').text());
              queryProducts(nextlink, products);
              
            },
            complete: function(){
              jQuery('.listing-image-loading').remove();
            }
          });
          return false;
        }

      });
      return false;
    }
  }
  queryProducts(nextlink, products);
});

[chadlly2003]

anyone have any ideas... or lead me in the right direction?

[chadlly2003]

Okay I figured it out. I used this script in the lazy loader function start.js. This seem to solve my issue

jQuery(function() {

$("img.listingProductImage").lazyload({ 
    effect: "fadeIn" 
}).removeClass("listingProductImage");
$(document).ajaxStop(function(){
    $("img.listingProductImage").lazyload({ 
        effect: "fadeIn" 
    }).removeClass("lazy");
});
});