Jump to content

LazyLoad problem with module infinite scroll (need help)


evropol

Recommended Posts

I Made LazyLoad for a photo of product in categories (product_list) by an example of Google
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
but I have a problem with module Inifinite Scroll Premium, if I use the scroll, photos of products are not loaded (blank space) what can be made?

Link to comment
Share on other sites

support of the module does not answer therefore I very much hope for the help at a forum.
my code for lazy load

 

document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;

const lazyLoad = function() {
if (active === false) {
active = true;

setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");

lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});

if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});

active = false;
}, 200);
}
};

document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});

 

 

in the infinite scroll premium module there are two js files, somebody can tell what I have to change in these files?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...