当前位置：首页 > 文章列表 > 文章 > 前端 > IntersectionObserver 怎么避免首屏图片抖动：懒加载、占位尺寸与可见性回收

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

来源：17golang原创 2026-08-26 19:36:18 0浏览收藏

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

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

这和观察器的触发时机是两回事。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 面板观察：向下滚动前，距离视口较近的图片开始请求；远处图片仍不应批量加载。

IntersectionObserver 进入预加载范围后切换图片加载状态并解除观察 — 观察器只负责切换加载状态，完成后解除观察，避免同一目标重复处理。

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

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

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)，而不是每次刷新都新建一个观察器，避免旧观察器和新观察器同时处理同一元素。