一次图片懒加载引发的布局抖动排查

最近在重构个人项目首页时，我踩进了一个看似不起眼但体验很糟的坑：页面里的图片一旦开始懒加载，滚动过程中内容就会突然“跳一下”，尤其是手机上特别明显。用户正读着简介，图片加载完布局整块下移，这种抖动比白屏还让人烦躁。下面把排查思路和最终方案记下来，也许能帮到同样被布局抖动折磨的人。

问题是怎么被发现的

那天我用低端安卓机自测，滚动到图文混排区域，每张图从空白变成有高度，后面的文字就被推下去。Chrome 的 Performance 面板里能看到频繁的 Layout 重排。我原本以为用了 loading="lazy" 就万事大吉，结果原生懒加载只解决“何时请求”，没解决“占多少位”。

为什么原生懒加载还不够

浏览器原生 loading="lazy" 很方便，但它默认在图片未加载时高度是 0（除非你写了宽高）。我的图片来自不同尺寸的后台数据，没统一比例，于是加载前没占位，加载后撑开高度。简单说：懒加载管请求，不管布局稳定性。这也让我重新理解了 CLS（Cumulative Layout Shift）指标——它真不是大厂才要在意的东西。

我的实用解决方式

第一步，给所有图片容器固定宽高比。我用 CSS aspect-ratio 配合父级宽度，比如封面图统一 16/9，头像统一 1/1。这样即使 src 没回来，盒子也有高度。第二步，对不支持 aspect-ratio 的旧浏览器，用 padding-top 百分比 hack 兜底。第三步，保留 loading="lazy" 和 decoding="async"，并在 img 上写明确的 width/height 属性，让浏览器提前算好空间。改完后再测，滚动如丝般顺滑，CLS 从 0.25 降到 0.02。

一点个人体会

前端优化常常不是“加个神库”，而是把基础属性用对。这次经历让我养成习惯：凡是动态图片，先问“它加载前占哪儿”。布局抖动这种细节，用户说不出名词，但身体会诚实离开页面。写博客也是提醒自己，别被高级概念带偏，把地基打平最实在。