loading="lazy" and ScrollTrigger.refresh()
Hello,
i can't let it go) I often see problems with ScrollTrigger and img loading="lazy", i have some problems too )
loading="lazy"
is a nice thing, WordPress has it active by default. I don't want to do without it voluntarily.
The recommended solution is to use
ScrollTrigger.refresh()
I have to admit, I don't quite understand how or when exactly to use it. I think, whenever browser loads the new "lazy" image? I wrote a little script, is that correct from your point
Here's a helper function I whipped together for handling lazy loading stuff:
function handleLazyLoad(config={}) {
let lazyImages = gsap.utils.toArray("img[loading='lazy']"),
timeout = gsap.delayedCall(config.timeout || 1, ScrollTrigger.refresh).pause(),
lazyMode = config.lazy !== false,
imgLoaded = lazyImages.length,
onImgLoad = () => lazyMode ? timeout.restart(true) : --imgLoaded || ScrollTrigger.refresh();
lazyImages.forEach((img, i) => {
lazyMode || (
