IntersectionObserver rootMargin 怎么提前触发图片加载

图片懒加载总是等到图片露出视口才开始请求，用户滚动快一点就容易看到空白。要提前触发，不需要改图片的 CSS 位置，只要给 IntersectionObserver 配一个正向的 rootMargin。例如 rootMargin: "0px 0px 600px 0px" 会把用于判断的根矩形向下扩展 600px，图片进入这块“预加载窗口”时就能执行回调。

先分清 rootMargin 改变的是什么

IntersectionObserver 默认以顶层文档视口作为 root，也可以传入一个滚动容器。rootMargin 是交叉判断时对 root 边界应用的偏移值，不是 CSS 的 margin，因此不会改变元素排版，也不会把图片真正“推”到更靠前的位置。

四个值遵循 CSS margin 的展开规则，顺序是上、右、下、左。正值表示向外扩展，所以图片懒加载最常见的配置是 0px 0px 600px 0px。如果写成 600px，四个方向都会扩展；只需要下方窗口时，这会让上方已经离开视口的图片也更容易再次进入判断范围。

另一个容易忽略的点是边界归属：rootMargin 只作用于 intersection root 本身，目标元素被其他祖先节点裁剪的区域不会因此变大。嵌套滚动列表要先把真正滚动的容器传给 root，再调底部偏移。

用底部预加载窗口触发图片加载

下面的最小实现约定图片先把真实地址放在 data-src，等观察器回调触发后再写入 src。threshold: 0 表示只要交叉区域从零变成非零就可以通知；这里真正负责“提前”的是底部正向 rootMargin。

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");
    // 单次加载不需要继续占用观察关系。
    observer.unobserve(image);
  });
}, {
  root: null,
  rootMargin: "0px 0px 600px 0px",
  threshold: 0
});

document.querySelectorAll("img[data-src]").forEach((image) => {
  // 只注册尚未设置真实地址的图片。
  imageObserver.observe(image);
});

这个写法把三件事拆开：观察器保存配置，entries 提供当前交叉目标，图片节点本身携带 data-src。unobserve() 只移除当前图片；如果页面销毁整个列表，再调用 disconnect() 清理观察器中的全部目标。

怎么把提前量调成可用的阈值

600px 只是一个容易观察的起点，不是固定答案。提前量要同时看滚动速度、图片体积、网络延迟和解码压力。先用一个较小的值观察“滚到图片附近时是否已经开始请求”，再按资源大小和移动端网络调整。

如果图片位于固定高度的滚动面板里，配置应类似 root: document.querySelector(".list")，并确保目标图片确实在这个面板的后代节点中。把 root 留成 null 却只滚动内部面板时，回调时机通常就不是你以为的“面板快滚到底”。

提前加载不生效时先查哪几项

第一，确认每张图片真的调用过 observe()，并且选择器能匹配到 data-src。第二，检查是否把 rootMargin 写成单值，导致四边都扩大。第三，确认目标没有被祖先的裁剪区域挡住；rootMargin 不会绕过其他祖先的 clip。最后，检查回调是否先执行了 unobserve，以及是否因为空的 data-src 提前退出。

实际排查时可以在回调里临时记录 entry.target、entry.isIntersecting 和 observer.rootMargin。它们分别回答“是谁触发”“是否进入计算区域”“观察器最终采用什么偏移字符串”，比盲目增大数值更快定位问题。

常见问题

rootMargin 能直接改变图片显示位置吗？

不能。它只改变 IntersectionObserver 的计算边界，布局位置仍由 HTML 和 CSS 决定。

为什么写了 600px，图片还是没有提前加载？

最常见原因是观察的 root 不对、目标没有注册，或图片的真实地址没有放在回调读取的 data-src 上。

提前量越大越好吗？

不是。过大的窗口会同时启动更多请求，可能增加带宽和解码压力；应以滚动速度和资源加载时延为依据逐步调整。