IntersectionObserver实现列表懒加载的阈值策略的实现方法

列表懒加载的触发点，通常不应放在用户已经看到空白卡片之后，而应放在底部哨兵即将进入观察范围时。IntersectionObserver 的实用组合是：视口场景使用 root: null，用正的底部 rootMargin 提前触发，使用 threshold: 0 或很小的比例判断是否相交，再用 loading 和 hasMore 保护分页请求。这样阈值只负责“什么时候通知”，请求锁负责“能不能发起”。

先把懒加载触发点放在列表底部

我在做长列表时，最容易踩的坑是把每一个卡片都交给观察器。分页加载只需要一个底部 sentinel，它代表“当前列表已经接近末尾”，而不是代表某一张业务卡片。视口是默认的 root；如果列表在独立滚动容器中，则要把这个容器显式传给 root。

下面的配置把触发点提前到视口底部 480 像素处。这个数字不是固定答案：网络慢、卡片高、接口返回快时可以增大；如果首屏请求过早或流量成本敏感，就应缩小。

const list = document.querySelector("#articleList");
const sentinel = document.querySelector("#listSentinel");

// root 为 null 表示相对浏览器视口观察，适合页面级列表。
const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];
  // threshold: 0 只关心是否碰到观察范围，不按像素计算重叠量。
  if (entry.isIntersecting) {
    loadNextPage();
  }
}, {
  root: null,
  // 提前预留加载时间，避免用户滚到底部才看到空白。
  rootMargin: "0px 0px 480px 0px",
  threshold: 0
});

observer.observe(sentinel);

用 threshold 区分进入事件和可见比例变化

threshold 是目标可见比例的门槛。设置为 0，表示目标刚刚与根边界相交时就可能收到通知；设置为 0.5，表示可见比例跨过 50% 时通知；传入数组则会在多个比例被跨过时分别通知。分页触发通常不需要数组，否则同一个哨兵在尺寸或滚动变化时可能带来更多回调。

要注意，阈值不是“提前 480 像素”的替代物：提前量由 rootMargin 表达，阈值由可见比例表达。前者适合控制网络准备时间，后者适合图片、动画等需要一定可见度后才启动的任务。Intersection Observer 也不提供精确的重叠像素判断，不能把它当成像素级测量工具。

用请求锁和结束标记守住回调边界

回调可能在请求尚未完成时再次进入，因此只判断 isIntersecting 不够。请求开始前设置 loading，成功后追加数据并更新 hasMore；没有下一页时调用 disconnect()，避免观察一个永远不会再产生数据的哨兵。

let loading = false;
let hasMore = true;
let page = 1;

async function loadNextPage() {
  // 两个守卫分别防重复请求和无意义请求。
  if (loading || !hasMore) return;
  loading = true;

  try {
    const response = await fetch(`/api/articles?page=${page + 1}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const result = await response.json();

    // 只把接口返回的数据交给渲染函数，避免回调承担列表细节。
    appendItems(list, result.items);
    page += 1;
    hasMore = result.hasMore === true;
    if (!hasMore) observer.disconnect();
  } catch (error) {
    // 失败时保留哨兵和页码，下一次进入观察范围仍可重试。
    console.error("加载下一页失败", error);
  } finally {
    loading = false;
  }
}

按滚动容器和网络状态收敛参数

如果列表位于 overflow: auto 的面板里，root 必须是这个面板，不能继续使用视口默认值；哨兵也必须是它的后代。否则页面看起来在滚动，观察器却可能一直没有有效通知。慢网环境应留出足够的 rootMargin，但要配合请求取消、错误重试和骨架屏，不能只把提前量无限增大。

上线前我会按三种状态检查：首屏数据少时，哨兵是否会连续触发；快速滚动时，loading 是否挡住并发请求；接口返回最后一页时，hasMore 是否让观察器停止。若只是图片懒加载，可以按图片元素设置更合适的 threshold；若是分页，单哨兵加小阈值通常更容易维护。

常见问题

rootMargin 越大，列表加载越好吗

不是。它只是把根边界扩大，过大可能提前请求很多用户不会读到的数据。应按卡片高度、接口耗时和网络情况设定，并观察首屏空白与无效请求的平衡。

threshold 设成 1 能做分页吗

可以触发，但要求哨兵完整进入根范围，容易受元素高度和滚动容器尺寸影响。分页更关心“接近底部”，一般使用 0 或小比例，再用 rootMargin 调整提前量。

最终可以记成一句话：root 定义看哪里，rootMargin 定义提前多少，threshold 定义看见多少才通知，而 loading 与 hasMore 决定回调是否真的发出下一页请求。