Issue with Lazy Loading of images

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Issue with Lazy Loading of images

This topic contains 6 replies, has 2 voices, and was last updated by

 
Keymaster
2 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #24996

    Participant

    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

    Attachments:
    You must be logged in to view attached files.
    #25002

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #25073

    Participant

    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?

    #25075

    Participant

    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);
     });
    });
    #25076

    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);
     });
    });
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #25210

    Participant

    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…

    #25212

    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)

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.