IntersectionObserver 如何只加载进入视口的图片

长图列表、商品瀑布流或文章详情页常见一个现象：用户只看了第一屏，页面却已经把后面几十张大图全部请求下来。解决办法不是给滚动事件不断加 getBoundingClientRect()，而是让 IntersectionObserver 观察图片占位元素，接近视口时再把真实地址放回 src。下面这套写法还会在加载后解除观察，并给首屏图片留下正常的优先级。

先把懒加载的触发边界设计清楚

如果直接给所有图片写真实的 src，浏览器可能在脚本介入前就开始请求。屏幕外图片应把真实地址暂存在 data-src，同时保留宽高，避免图片出现时把下面的内容突然推开：

loading="lazy" 是浏览器级的补充；需要控制预加载距离、给背景图或自定义资源做统一入口时，再使用观察器。这里把触发距离设为图片进入视口前 200 像素，网络较慢时用户更容易看到完整图片。

用一个观察器接管多张图片

同一个观察器可以观察多个目标。回调里只处理进入观察范围的条目，真实地址写回后立刻移除 data-src，这样后续代码不会误以为它仍处于待加载状态。

const lazyImages = document.querySelectorAll('img[data-src]');

// 使用一个观察器管理所有屏幕外图片，避免给每张图片绑定滚动事件。
const observer = new IntersectionObserver((entries, currentObserver) => {
  entries.forEach((entry) => {
    // 未进入观察范围时不做资源请求。
    if (!entry.isIntersecting) return;

    const image = entry.target;
    const source = image.dataset.src;

    // 地址缺失时也要停止观察，避免滚动过程中反复进入回调。
    if (!source) {
      currentObserver.unobserve(image);
      return;
    }

    image.src = source;
    image.removeAttribute('data-src');
    // 图片只需要触发一次，加载后释放观察关系。
    currentObserver.unobserve(image);
  });
}, {
  root: null,                 // null 表示使用文档视口。
  rootMargin: '200px 0px',    // 提前 200px 进入准备区。
  threshold: 0.01             // 出现很小的交集就触发。
});

lazyImages.forEach((image) => observer.observe(image));

这里的 root 为 null，所以判断基于浏览器视口；如果图片在独立滚动容器里，应把该容器传给 root，而不是继续监听整个页面。threshold 是相交比例，0.01 适合“刚进入就开始准备”的资源，不等于图片已经完整可见。

加载一次还不够：失败和降级也要有边界

懒加载代码最容易漏掉两件事：浏览器不支持 IntersectionObserver 时，图片永远停留在占位图；以及真实地址为空时，观察器会在每次滚动中继续被触发。生产代码可以在初始化时做一次降级，把待加载地址直接恢复给 src：

const images = [...document.querySelectorAll('img[data-src]')];

// 不支持观察器时直接加载，优先保证内容可见。
if (!('IntersectionObserver' in window)) {
  images.forEach((image) => {
    const source = image.dataset.src;
    if (source) image.src = source;
  });
} else {
  // 支持观察器时复用统一的观察逻辑。
  images.forEach((image) => observer.observe(image));
}

如果业务不需要控制背景图或自定义资源，优先考虑只使用原生 loading="lazy"。无论选择哪种方案，都要给图片设置宽高或稳定的容器比例，并用浏览器 Network 面板确认：首屏图及时请求，远处图片滚动接近后才出现请求。

常见问题

为什么图片已经进入屏幕却还没加载？

先检查目标是否真的被 observe()，再检查 data-src 是否为空；若使用了滚动容器，还要确认 root 是正确的容器。

rootMargin 越大越好吗？

不是。它越大，请求越早，滚动体验可能更平滑，但也会增加尚未阅读内容的流量。可以从 200 像素开始，结合图片体积和网络情况调整。

每张图片都要创建一个 IntersectionObserver 吗？

不需要。一个观察器可以管理多个目标；只有观察配置不同，例如不同的根容器或阈值，才考虑拆分观察器。

判断懒加载是否合格，关键不是“页面最终有没有图片”，而是首屏、预加载距离、一次性清理和降级路径是否都符合页面目标。