IntersectionObserver 怎么避免首屏图片抖动：懒加载、占位尺寸与可见性回收

图片懒加载最容易被忽略的一点，不是“什么时候把 src 填上”，而是图片还没到之前，页面有没有先把它应该占的空间留出来。只用 IntersectionObserver 延后赋值，图片一旦解码完成，正文仍可能被向下推，用户看到的就是首屏抖动。

先用固定尺寸或 aspect-ratio 占住版面，再用 IntersectionObserver 提前加载，最后在图片完成或失败后结束观察；这三个动作缺一个，懒加载都可能留下可见的布局问题。

为什么图片加载完成后页面会突然跳一下

浏览器排版时，如果图片没有宽高属性，也没有父容器的比例约束，图片加载前只能按一个很小甚至为零的高度参与布局。等真实资源返回、尺寸被解码出来，下面的文字和按钮就会整体移动。

这和观察器的触发时机是两回事。IntersectionObserver 只告诉脚本目标与视口或根元素的相交状态变化，并不会替元素预留高度。把观察器写得再早，也不能替代布局尺寸。

先把图片盒子的尺寸固定下来

内容卡片的宽度通常来自父容器，最实用的做法是给图片补上 width、height，或者让外层使用 aspect-ratio。下面的示例假定图片卡片采用 16:9，真实项目应按接口返回的原图比例填写，不能所有图片都硬套一个比例。

.cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef1f5;
}

.cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这一步的验收点很具体：在网络限速或禁用缓存的情况下，图片请求尚未完成时，卡片下方的标题位置仍然不应被推动。若图片比例各不相同，优先在服务端返回尺寸，前端通过内联样式或 CSS 变量传入实际比例。

让观察器只负责“何时开始加载”

观察器回调里只做三件事：确认目标进入预加载范围、把 data-src 移到 src、结束对这个目标的观察。把网络重试、骨架动画和列表状态都塞进回调，后续很难判断到底是观察器重复触发，还是业务代码重复赋值。

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

const observer = new IntersectionObserver((entries, currentObserver) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;

    const image = entry.target;
    image.src = image.dataset.src;
    image.removeAttribute('data-src');
    currentObserver.unobserve(image);
  }
}, {
  root: null,
  rootMargin: '300px 0px',
  threshold: 0.01
});

lazyImages.forEach((image) => observer.observe(image));

rootMargin 的 300 像素表示提前进入观察范围，不是给图片增加 300 像素高度。验收时可以在 DevTools 的 Network 面板观察：向下滚动前，距离视口较近的图片开始请求；远处图片仍不应批量加载。

处理加载完成、失败和动态列表

图片成功或失败都应该有可见状态，否则失败时只留下灰色盒子，用户不知道是还在等待还是资源已经不可用。可以把状态写在图片的父元素上，并在两个事件里统一结束处理。

function markImageState(image, state) {
  image.closest('.cover')?.setAttribute('data-state', state);
}

document.addEventListener('load', (event) => {
  if (event.target.matches('img')) {
    markImageState(event.target, 'loaded');
  }
}, true);

document.addEventListener('error', (event) => {
  if (event.target.matches('img')) {
    markImageState(event.target, 'failed');
  }
}, true);

如果列表是滚动加载或筛选后重新渲染，新增的 img[data-src] 不会自动进入旧的 querySelectorAll 结果。此时应让列表更新函数显式调用 observeNewImages(container)，而不是每次刷新都新建一个观察器，避免旧观察器和新观察器同时处理同一元素。

兼容与边界：什么时候不必自己写观察器

静态内容可以先考虑原生的 loading="lazy"，它的代码量更小；需要提前距离、动态列表、加载状态或自定义回收策略时，再使用 IntersectionObserver。两者也不应对同一张图重复设置不同的加载路径。

对不支持观察器的旧环境，可靠的降级不是让图片永远不显示，而是直接把 data-src 写回 src，或在特性检测失败时执行一次批量加载。降级后仍要保留占位尺寸，因为布局稳定和懒加载是两个独立问题。

上线前用四个检查点验收

1. 禁用缓存并限速：图片请求完成前，卡片高度和下方内容位置不变。
2. 向下滚动：只加载进入 rootMargin 范围的图片，离屏图片不提前全部请求。
3. 模拟 404：失败状态可见，列表仍能继续滚动，观察器不会无限重复触发。
4. 追加一批动态卡片：新图片能被观察，旧图片不会被第二个观察器重复处理。

常见问题

把 rootMargin 调大，能解决页面抖动吗？

不能。它只能让资源更早进入加载条件，页面是否抖动取决于图片盒子有没有提前占位。

图片已经加载成功，还要保留观察吗？

通常不需要。成功或失败后解除观察可以减少后续回调；如果业务要做离屏资源回收，应把回收策略单独设计，并确保重新进入视口时能恢复资源。

为什么给图片写了 width 仍然会跳动？

只有宽度而没有高度时，浏览器仍可能无法在加载前得到准确比例。为图片提供真实的宽高属性，或用与资源比例一致的 aspect-ratio，再检查 CSS 是否覆盖了高度。

把布局占位、加载触发和状态收尾拆开，懒加载就更容易调试：抖动看尺寸，加载时机看观察范围，失败行为看事件状态。出了问题先定位是哪一层失效，不要先把阈值和提前距离一起调大。