[SOLVED] Image native lazy loading for horizontal scroll

Image native lazy loading for horizontal scroll

Native lazy loading works just fine for vertical scrolling. But I found that it doesn't when there is a horizontal scroll with an overflow-x. In that case, all the images get loaded, even if they have a fixed size.

Is that working as designed, or can it be fixed?

Solution

Native lazy loading in browsers is primarily designed for vertical scrolling scenarios. When dealing with horizontal scrolling using overflow-x, the browser may load all images to ensure smooth scrolling and avoid layout shifts, which is why all the images get loaded even if they have a fixed size. Always Use IntersectionObserver to detect when images enter the viewport and load them. If IntersectionObserver is not supported, fall back to a manual scroll event listener.

Example CSS for you;

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

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers that do not support IntersectionObserver
        let active = false;

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

                setTimeout(function() {
                    lazyImages.forEach(function(lazyImage) {
                        if ((lazyImage.getBoundingClientRect().left <= window.innerWidth && lazyImage.getBoundingClientRect().right >= 0)) {
                            lazyImage.src = lazyImage.dataset.src;
                            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);
    }
});

.scroll-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
}

.scroll-container img {
    width: 200px; /*you can use any fixed size*/
    height: auto;
    display: inline-block;
}

<div class="scroll-container">
    <img data-src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="Image 1" class="lazy">
    <img data-src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="Image 2" class="lazy">
    more here. ...
</div>