图片加载前需占位防布局跳动：用HTML width/height属性或CSS aspect-ratio+object-fit确保容器预留空间，避免回流；懒加载图片须提前占位，禁用JS补样式方案。
图片加载前没占位导致布局重排
浏览器解析 HTML 时，<img> 标签默认宽高为 0，直到图片加载完成、尺寸确定后才重绘——这会触发回流（reflow），让下方内容突然下移，产生“跳动”。初级项目里尤其明显，因为常直接写 <img src="xxx.jpg">，没设 width/height。
CSS 中用 aspect-ratio + object-fit 替代固定像素宽高
硬写 width: 300px; height: 200px; 会导致响应式失效或图片拉伸。现代方案是保留原始宽高比，用 CSS 控制容器占位：
- 给
<img>外层加一个<div class="img-container"> - 在 CSS 中设置
.img-container { aspect-ratio: 4 / 3; }（按实际图比例填） -
<img>自身设width: 100%; height: 100%; object-fit: cover; - 这样容器始终占固定比例空间，图片加载前后布局不变化
.img-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
服务端或构建时提前注入尺寸更可靠
靠 CSS aspect-ratio 仍依赖开发者手动填对比例，容易出错。真正防抖的底线做法，是在 HTML 里直接写宽高属性（浏览器原生支持，无需 JS）：
- Webpack/Vite 项目可用
image-loader或vite-plugin-image-presets在构建时读取图片元数据 - 生成类似
<img src="a.jpg" width="800" height="600">的标签 - 即使 CSS 未生效，浏览器也能根据
width/height属性预留空间 - 注意：HTML 中的
width/height是数值，不是带单位的 CSS 值；它只影响初始布局，不影响响应式缩放
慎用 loading="lazy" 加剧跳动
很多项目为优化首屏，给图片加 loading="lazy"，但懒加载会让图片在进入视口时才开始请求——此时若没提前占位，依然会抖。解决方式只有两个：
立即学习“前端免费学习笔记（深入）”；
- 确保所有懒加载图片都有
width和height属性（或父容器有aspect-ratio） - 避免对首屏关键图用
loading="lazy"，比如 banner、头像等 - 不要依赖 JS 库（如
lozad.js）来补占位，它们通常在图片加载中才动态插入样式，已晚于布局计算
aspect-ratio，只靠 JS 监听 load 事件后改样式——这时用户已经看到空白或错位了。 
