前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查

图片懒加载能减少首屏资源请求，但如果只把图片延后加载、没有给图片区域预留尺寸，页面反而会出现明显跳动。用户刚准备点击按钮，图片突然撑开页面，按钮位置变了，这就是典型的布局偏移问题。

这篇文章按完整工作流处理：先界定目标，再找出布局抖动原因，接着用固定比例占位、IntersectionObserver 按需加载和加载状态管理解决问题，最后用 CLS 指标复查。

目录

• 目标和边界：懒加载不等于布局稳定
• 全流程总览：从图片抖动到 CLS 稳定
• 阶段 1：先给图片区域预留比例
• 阶段 2：进入视口附近再发起加载
• 阶段 3：加载完成后稳定替换占位
• 推荐工作流：懒加载、占位和指标复查
• 容易踩坑的地方
• 速查表

目标和边界：懒加载不等于布局稳定

本次目标不是单纯“少加载几张图”，而是在减少首屏请求的同时保持布局稳定。一个合格的图片懒加载方案至少要满足三个条件：

• 图片加载前，列表卡片已经有稳定高度。
• 图片接近视口时再开始请求，避免过早加载。
• 图片替换占位时不改变卡片尺寸。

本文示例适合商品列表、文章封面、瀑布流前的普通列表、用户头像和卡片封面。复杂瀑布流还要额外处理列高计算，这里先不展开。

全流程总览：从图片抖动到 CLS 稳定

先看整体链路。布局抖动通常不是懒加载本身造成的，而是“图片尺寸未知”。浏览器第一次排版时不知道图片要占多高，图片回来后重新撑开内容，就产生了位移。

所以治理顺序应该是：先预留空间，再做懒加载，最后复查指标。顺序反了，就会变成“请求少了，但页面还是跳”。

阶段 1：先给图片区域预留比例

目标

让图片没加载出来时，卡片高度已经确定。这样图片回来后只是替换内容，不会把下面的文字、按钮或下一张卡片挤下去。

关键动作

推荐用固定比例容器包住图片：

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

.lazy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}

.lazy-img.is-loaded {
  opacity: 1;
}

检查点

阶段 2：进入视口附近再发起加载

目标

图片不用一开始全部请求，但也不能等到完全进入视口才加载，否则用户滚动时可能看到空白。通常可以提前一段距离触发。

关键动作

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

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;

    const img = entry.target;
    img.src = img.dataset.src;
    observer.unobserve(img);
  });
}, {
  rootMargin: '200px 0px',
  threshold: 0.01
});

images.forEach((img) => observer.observe(img));

检查点

打开网络面板后，首屏外图片不应该一开始全部请求；向下滚动时，接近视口的图片才开始加载。

阶段 3：加载完成后稳定替换占位

目标

图片请求成功后再显示，失败时也要保留原来的占位区域，不能让卡片高度塌掉。

关键动作

document.querySelectorAll('.lazy-img').forEach((img) => {
  img.addEventListener('load', () => {
    img.classList.add('is-loaded');
  });

  img.addEventListener('error', () => {
    img.classList.add('is-error');
    img.alt = '图片加载失败';
  });
});

失败状态也应该在同一个固定比例容器内展示，例如显示浅色背景、错误图标或简短提示。核心原则是：成功和失败都不改变容器尺寸。

推荐工作流：懒加载、占位和指标复查

落地时可以按下面的顺序做，不要一上来只写观察器代码。

1. 先统计页面里会延迟加载的图片区域。
2. 为每类图片确定固定比例，例如 16:9、4:3、1:1。
3. 用 CSS 预留空间，并准备骨架背景。
4. 用 IntersectionObserver 在接近视口时设置真实图片地址。
5. 监听加载成功和失败状态，保证替换过程不改尺寸。
6. 用 Performance 面板或线上监控复查 CLS。

容易踩坑的地方

• 只加 loading="lazy"：原生懒加载能延后请求，但不能自动帮你预留空间。
• 只写 width 不写高度：宽度稳定不代表高度稳定，列表仍然可能被图片撑开。
• 骨架屏高度和真实图片不一致：替换时依然会跳，骨架区域要和图片容器一致。
• 图片失败时移除节点：失败也要保留占位，否则页面高度会突然变化。
• 只在本地看一遍：慢网速、缓存关闭、移动端宽度下更容易暴露布局抖动。

速查表

总结一下：图片懒加载不是只把请求延后，而是要和布局占位一起设计。先把尺寸边界定住，再按需加载图片，最后复查 CLS，用户看到的页面才会又快又稳。