IntersectionObserver 怎样实现列表图片进入视口再加载

长列表里如果一开始就给所有 img 设置真实地址，首屏之外的图片也会很快加入下载队列。更稳妥的做法是：把真实地址先放到 data-src，用 IntersectionObserver 观察图片接近视口的时机，再写入 src；加载任务已经交给浏览器后立即停止观察。

官方资料：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

先把图片地址和布局占位分开

列表项可以继续渲染图片元素，但不要把真实地址放进 src。下面的 data-src 只是延迟加载数据，width、height 或 CSS 比例框则负责让浏览器提前知道图片空间，避免滚动时突然把后面的内容推开。

占位图可以是轻量颜色块或统一的本地占位资源。关键是不要把空白高度交给图片下载结果决定；否则即使延迟加载成功，列表也可能出现跳动。

用 rootMargin 把加载时机放在真正可见之前

观察器的 root 默认可以使用顶层视口；rootMargin: "200px 0px" 会把判断区域向上下扩展，让图片在距离视口还有一段距离时就进入回调。threshold: 0.01 表示只要有很小比例进入判断区域就触发，适合图片预加载。

如果图片位于一个独立的滚动容器中，root 必须改成该容器，并且被观察的图片要是它的后代。不要把页面视口当成滚动容器的替代品，否则页面没有滚动时，容器内图片可能无法按预期触发。

const options = {
  root: null, // null 表示使用浏览器视口作为观察边界
  rootMargin: "200px 0px", // 提前 200px 触发，给网络请求留出时间
  threshold: 0.01, // 只需有少量区域进入判断范围即可通知
};

回调里设置 src，随后停止观察

真正的延迟加载逻辑可以集中在一个观察器里。entry.target 是当前图片，设置 src 后删除 data-src，最后调用 observer.unobserve(image)。这样同一张图片不会因为继续滚动而反复进入加载分支。

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

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return; // 尚未进入预加载区域，本次不改变图片状态
    }

    const image = entry.target;
    const source = image.dataset.src;
    if (!source) {
      observer.unobserve(image); // 没有地址时停止无效观察
      return;
    }

    image.src = source; // 把真实地址交给浏览器开始加载
    image.removeAttribute("data-src"); // 标记为已经提交过加载任务
    image.classList.remove("lazy-image");
    observer.unobserve(image); // 一次性图片不需要继续观察
  });
}, {
  root: null,
  rootMargin: "200px 0px",
  threshold: 0.01,
});

lazyImages.forEach((image) => {
  imageObserver.observe(image); // 为每个延迟图片建立观察关系
});

回调运行在主线程上，所以只做取地址、改属性和解绑观察等轻量工作。图片解码、错误展示或重试策略可以由 load、error 事件另行处理，不要在观察回调里做大段计算。

把兼容和重复初始化边界补齐

如果页面需要兼容不支持该 API 的环境，可以退回到直接加载，而不是让图片永远停留在占位状态。这个分支只承担可用性兜底；它没有 IntersectionObserver 的按视口节省请求效果。

function loadAllImages(images) {
  images.forEach((image) => {
    if (image.dataset.src) {
      image.src = image.dataset.src; // 兼容分支直接提交真实地址
      image.removeAttribute("data-src");
    }
  });
}

const images = document.querySelectorAll("img[data-src]");
if ("IntersectionObserver" in window) {
  // 生产代码中应保证这段初始化只执行一次。
  images.forEach((image) => imageObserver.observe(image));
} else {
  loadAllImages(images); // 不支持 API 时优先保证图片可见
}

工程上还要留意三个边界：第一，脚本重复执行会重复注册观察器，应把初始化放在页面模块生命周期中；第二，虚拟列表重新复用节点时，要更新 data-src 后再重新观察；第三，图片加载失败时可以保留错误占位和重试入口，但不要把错误地址无限次写回 src。

常见问题

为什么图片已经露出一点才开始请求？

通常是 rootMargin 仍为默认的 0px，或者图片所在滚动区域没有配置正确的 root。想提前请求就扩大判断区域，并确认目标确实是该 root 的后代。

为什么回调会执行多次？

回调可能收到多个目标或多次阈值变化；单次加载完成后调用 unobserve，同时删除 data-src，就能把同一图片从延迟加载集合中移除。

IntersectionObserver 能精确知道重叠了多少像素吗？

不能。它提供的是交叉比例和阈值触发，适合“接近或进入视口”这类任务；如果业务依赖精确像素重叠，需要重新评估 API 边界。