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 Ernest Marcinko 3 years, 11 months ago.
- AuthorPosts
- December 11, 2019 at 10:43 pm #24996
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.December 12, 2019 at 10:09 am #25002Hi,
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 :)
December 17, 2019 at 4:13 pm #25073I 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?
December 17, 2019 at 4:26 pm #25075I 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); }); });
December 17, 2019 at 5:33 pm #25076Well, maybe the DOMSubtreeModified will do the trick. That is definitely triggered when the content changes.
Best,jQuery(function($) { var t; $('body').on("DOMSubtreeModified", function(event, id, instance, phrase) { clearTimeout(t); setTimeout(function(){ $(window).scroll(); $(document).scroll(); }, 250); }); });
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
January 3, 2020 at 4:16 pm #25210Ok, 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…
January 4, 2020 at 2:07 pm #25212Instead 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 :)
- AuthorPosts
You must be logged in to reply to this topic.