Issue with Lazy Loading of images

[ssoulless45]

Im using lazy load for the images of my products catalog, I have enabled the option “Live load the results on the results page?” it seems to work fine, however the lazy loading for the images is not working right when applying filters in the search settings, I would like to know in which part I can check the ajax function that loads the results to check if I can force the use of the lazyload function. Please check the image attached

[Ernest Marcinko]

Hi,

Well, it depends on how the lazy loader is implemented and what triggers the refershing of the images. Maybe the document/window scrolling?

Based on the plugin javascript API, you could perhaps construct a custom code to trigger the correct event once the search is finished. Something like this:

jQuery(function($) {
 $(".asp_main_container").on("asp_search_end", function(event, id, instance, phrase) { 
   setTimeout(function(){
      $(window).scroll();
      $(document).scroll();
   }, 250);
 });
});

..however I am just guessing that either of these will trigger the lazy loader, it might work different ways.

[ssoulless45]

I tried the code you gave me, however it does not work, the event is not triggered.

i have “Live load the results on the results page?” enabled, the event you said is not triggering… is there another event handler I can try when search is finished that works even when you have “Live load the results on the results page?” option enabled?

[ssoulless45]

I tried using another event like

/*trigger the lazyload once the search filtering is finished*/
jQuery(function($) {
 $(".asp_search_end").on("asp_results_show", function(event, id, instance) { 
   console.log("Results loaded ASP");
   setTimeout(function(){
      $(window).scroll();
      $(document).scroll();
   }, 250);
 });
});

But not working neither, also tried to use the results container but it’s not working neither:

/*trigger the lazyload once the search filtering is finished*/
jQuery(function($) {
 $("#mf-shop-content").on("asp_results_show", function(event, id, instance) { 
   console.log("Results loaded ASP");
   setTimeout(function(){
      $(window).scroll();
      $(document).scroll();
   }, 250);
 });
});

[Ernest Marcinko]

Well, maybe the DOMSubtreeModified will do the trick. That is definitely triggered when the content changes.

jQuery(function($) {
var t;
$('body').on("DOMSubtreeModified", function(event, id, instance, phrase) {
   clearTimeout(t);
   setTimeout(function(){
      $(window).scroll();
      $(document).scroll();
   }, 250);
 });
});

[ssoulless45]

Ok, I tried this snipet and added another extra code to close search filters once a filter is applied on mobile (it’s an usability adjustment), however it is breaking up my website, creating an infinite loop and making my website load and load until browser just breaks.

/*trigger the lazyload once the search filtering is finished*/
jQuery(function($) {
var t;
$('body').on("DOMSubtreeModified", function(event, id, instance, phrase) {
   clearTimeout(t);
   setTimeout(function(){
		$(window).scroll();
      	$(document).scroll();
		//Also remove filter screen on mobile once results are loaded
     	if($('.close-sidebar').length){
          $('.close-sidebar').click();
        }
   }, 1000);
 });
});

I really need to catch the exact event once the search filter is applied…

[Ernest Marcinko]

Instead of that, maybe using a mutation observer method could be much better. In your case something like this:

jQuery(function($) {
  // The node to be monitored
  var target = "#primary";
  var t;
  
  if ( jQuery(target).length > 0 ) {
    target = jQuery(target).get(0);
    // Create an observer instance
    var observer = new MutationObserver(function( mutations ) {
      mutations.forEach(function( mutation ) {
        var newNodes = mutation.addedNodes; // DOM NodeList
        if( newNodes !== null ) { // If there are new nodes added
            // Execute your code here!
            console.log('New nodes are added!');
            clearTimeout(t);
            t = setTimeout(function(){
              $(window).scroll();
              $(document).scroll();
            }, 250);
           	if( $('.close-sidebar').length ){
                $('.close-sidebar').click();
            }
        }
      });    
    });
    
    // Configuration of the observer:
    var config = { 
    	attributes: true, 
    	childList: true, 
    	characterData: true 
    };
     
    // Pass in the target node, as well as the observer options
    observer.observe(target, config);
  }
});

This should be much better, as it does not use events, but it works a bit differently.

I cannot guarantee that either of these work in any way unfortunately. I will add an event hanlder for when the live results are finished for the upcoming release. (asp_search_end)

[Author]

Posts