IntersectionObserver 回调频繁触发时怎么减少重复加载

IntersectionObserver 回调频繁触发时，不要先给回调函数加防抖。更稳妥的做法是：把 threshold 收敛到懒加载真正需要的一个阈值，在每个目标元素上记录 loading、done 或 error 状态，发起请求前就锁定状态，资源交付后立即 unobserve()。这样即使滚动回弹、阈值反复穿越或一次回调收到多个 entries，同一个元素也不会重复创建加载任务。

为什么一个元素会让 IntersectionObserver 回调多次

这个 API 观察的是目标与 root 的相交状态，不是“用户滚动了一次”。目标刚被 observe() 时，浏览器会安排一次初始通知；之后只要相交状态跨过配置的阈值，或者多个目标在同一批次发生变化，回调都可能再次收到通知。entries 本身也是一个列表，不能假设每次只有一个元素。

在发起请求前锁定元素级状态

去重的关键不是限制回调，而是限制副作用。下面用 data-load-state 保存状态；如果组件会频繁创建和销毁，也可以把状态放进 WeakMap，避免把节点永久留在全局 Map 中。

const observer = new IntersectionObserver(async (entries, currentObserver) => {
  for (const entry of entries) {
    // 只处理进入预加载窗口的目标。
    if (!entry.isIntersecting) continue;

    const image = entry.target;
    const state = image.dataset.loadState || "idle";
    // loading 和 done 都直接退出，防止重复创建请求。
    if (state === "loading" || state === "done") continue;
    image.dataset.loadState = "loading";

    try {
      const response = await fetch(image.dataset.src);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const blob = await response.blob();
      image.src = URL.createObjectURL(blob);
      image.dataset.loadState = "done";
      // 资源已经交付，继续观察没有收益。
      currentObserver.unobserve(image);
    } catch (error) {
      // 失败允许后续策略重试；不要把失败伪装成完成。
      image.dataset.loadState = "error";
      image.dataset.lastError = error.message;
    }
  }
}, { rootMargin: "300px 0px", threshold: 0 });

document.querySelectorAll("img[data-src]").forEach((image) => {
  // 进入观察集合前统一初始化状态。
  image.dataset.loadState = "idle";
  observer.observe(image);
});

这里要特别注意时序：必须先写入 loading，再执行 fetch()。如果等请求返回后才写状态，快速滚动造成的第二次回调可能已经启动第二个请求。失败状态是否自动重试，应由业务决定；重试时要清理旧的错误信息，并设置次数或退避时间。

用 rootMargin 提前加载，不要堆叠 threshold

图片懒加载只需要知道“是否进入加载窗口”，通常使用 threshold: 0 或一个很小的单值即可。想让图片在真正进入视口前开始请求，应调大 rootMargin，例如 300px 0px 表示把上下方向的观察窗口向外扩展。它解决的是加载时机，不会替代去重状态。

如果把 threshold 配成大量从 0 到 1 的小数，滚动时会产生更多阈值穿越事件；这适合观察可见比例或进度，不适合只关心一次懒加载。另一个边界是自定义滚动容器：目标必须是指定 root 的后代，否则应先检查容器层级和滚动区域是否选对。

失败重试与节点复用要单独处理

组件化列表会复用 DOM 节点，旧节点上的 done 状态可能误伤新资源。替换 data-src 时，应同时恢复为 idle，必要时重新 observe()；节点彻底移除时则调用 unobserve()，并释放由 URL.createObjectURL() 创建的旧对象 URL。请求日志可以按资源地址统计发起次数，性能面板则用来确认回调没有塞入大段同步计算。

最后用三项检查收口：同一元素在 loading 时再次进入是否不会发请求；成功后是否从观察集合退出；失败后是否有明确的重试上限。做到这三点，回调多次本身不再是重复加载的根因。

常见问题

把 callback 做防抖就能解决重复请求吗？

不能。防抖可能延迟处理，但无法表达某个元素已经加载中或加载完成。请求去重仍要依赖目标级状态。

加载成功后一定要 unobserve 吗？

对一次性懒加载，通常应该停止观察；如果同一元素还承担可见性统计或动画触发，再拆分成独立 observer，别让一个回调同时负责互相冲突的职责。