用 IntersectionObserver 构建可停止的懒加载队列

做长列表时，最容易失控的不是“看不见的图片没有延迟加载”，而是元素反复进入视口后重复排队、请求一直挂着，列表切换后旧任务还在回调。我的做法是把职责拆成三层：IntersectionObserver 只负责发现目标，Set 负责去重，AbortController 负责在页面离开时停止请求。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

一、先划分观察器、队列和请求控制器的边界

IntersectionObserver 会在目标与 root 的相交状态跨过阈值时异步通知回调，同一个观察器可以管理多个目标。它适合做“发现”，不适合承载请求去重、并发限制和销毁逻辑。把观察器回调压缩成一次入队，后续行为就容易测试和停止。

二、用 rootMargin 提前触发并建立去重队列

rootMargin: "0px 0px 240px" 表示把观察区域向底部扩展，让图片还未真正露出时就有准备时间。下面的 pending 只记录正在处理的元素；图片成功后从集合删除并停止观察，避免同一个节点反复触发。

const pending = new Set();
const controllers = new Map();

// 观察器只负责发现目标，具体请求交给 loadImage。
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const target = entry.target;
    if (pending.has(target)) continue; // 同一元素只允许一次在途任务
    pending.add(target);
    loadImage(target).catch(() => {
      target.dataset.state = "retry"; // 失败保留重试状态，不吞掉原因
    });
  }
}, { rootMargin: "0px 0px 240px", threshold: 0 });

document.querySelectorAll("img[data-src]").forEach((target) => {
  // data-src 仍保留原始地址，src 只在任务真正开始时写入。
  observer.observe(target);
});

真实项目还应给队列增加并发上限；如果一次有很多卡片同时接近视口，可以把元素放入数组，由一个调度器按上限取出。关键点是：观察器不保存业务结果，队列才是请求生命周期的唯一入口。

三、加载完成后停止观察并处理失败状态

成功与失败必须分开处理。成功时设置 src、删除 data-src，随后 unobserve；失败时删除 pending 标记并保留 retry，这样点击重试或再次进入视口时仍可重新入队。

async function loadImage(target) {
  const controller = new AbortController();
  controllers.set(target, controller);
  try {
    // signal 让列表切换时可以中止旧请求，避免回调写入已卸载节点。
    const response = await fetch(target.dataset.src, { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    target.src = target.dataset.src;
    delete target.dataset.src;
    target.dataset.state = "loaded";
    observer.unobserve(target); // 成功后不再观察这个目标
  } finally {
    controllers.delete(target);
    pending.delete(target); // 允许失败重试，也避免集合持续增长
  }
}

finally 不代表请求一定成功，它只保证控制器和去重集合会被清理。若要展示错误信息，可以在 catch 中设置占位状态；不要把失败元素永久留在 pending 中，否则重试永远进不了队列。

四、卸载或切换列表时整体停止

列表数据被替换时，旧观察器和旧请求必须一起结束。先遍历控制器调用 abort()，再调用 disconnect() 解除所有目标关系，最后清空集合。对于只想停掉某一张图片的场景，保留它对应的 controller 并调用 unobserve(target) 即可。

function stopLazyLoading() {
  // 先取消在途请求，再解除观察关系，避免旧回调继续入队。
  for (const controller of controllers.values()) controller.abort();
  controllers.clear();
  pending.clear();
  observer.disconnect(); // 统一停止所有 target 的观察
}

window.addEventListener("pagehide", stopLazyLoading);

常见边界有三个：root 是滚动容器时要把容器传给 root；不要把 threshold 误当成加载并发控制；中止请求后要识别 AbortError，避免把用户主动停止显示成网络故障。

相关问题

为什么图片已经露出却没有立刻加载？

IntersectionObserver 是异步通知，且只有跨过 threshold 才触发。先检查目标是否被正确 observe，再检查 root、rootMargin 和元素自身是否有尺寸。

什么时候用 unobserve，什么时候用 disconnect？

单个资源完成或单个目标取消时用 unobserve；整个列表销毁或切换数据集时用 disconnect，并同步取消在途请求。

小结：可停止懒加载的核心不是把回调写长，而是让观察、去重、请求和清理各自拥有明确边界。这样既能提前加载，也能在列表变化时完整收回旧任务。