水平滚动的图像原生延迟加载

Question

本机延迟加载对于垂直滚动效果很好。但我发现当水平滚动带有overflow-x 时就不会了。在这种情况下，所有图像都会被加载，即使它们具有固定大小。

这是否按设计工作，或者可以修复吗？

Answer 1

浏览器中的原生延迟加载主要是针对垂直滚动场景而设计的。当使用overflow-x处理水平滚动时，浏览器可能会加载所有图像以确保平滑滚动并避免布局变化，这就是为什么即使图像具有固定大小也会加载所有图像。 始终使用 IntersectionObserver 来检测图像何时进入视口并加载它们。如果不支持 IntersectionObserver，请回退到手动滚动事件侦听器。

为您提供 CSS 示例；

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>