图片延迟加载可以显著提高网页性能，尤其是对于包含大量图片或资源的页面。延迟加载的优点在于它避免了用户没有浏览到的内容被提前加载，从而减少了初始加载时间和网络带宽的消耗。

本文讲如何使用IntersectionObserver()实现图片延迟加载。示例如下：
https://10.1pxeye.com/docs/element-in-viewport/

代码：

const loadImages = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const imgElement = entry.target;
            const imgSrc = imgElement.dataset.imgSrc;
            imgElement.style.backgroundImage = `url('${imgSrc}')`;
            observer.unobserve(imgElement);
        }
    });
};

const showImgInViewport = () => {
    const observerOptions = {
        rootMargin: '100px', // Load images before they enter the viewport
        threshold: 0.1 // When 10% of the image is visible
    };

    const observer = new IntersectionObserver(loadImages, observerOptions);
    document.querySelectorAll('[data-img-src]').forEach(imgElement => {
        observer.observe(imgElement);
    });
};

showImgInViewport();

IntersectionObserver 的优点：

• IntersectionObserver 是专门为观察元素的可见性而设计的 API，它能高效地处理滚动和视图变化，不会像监听 scroll 事件那样频繁触发回调，减少性能开销。
• 通过 IntersectionObserver，你可以精准控制图片何时加载，比如通过设置 rootMargin 提前加载一定距离范围内的图片，或者通过 threshold 来控制图片可见多少时触发加载。

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver