图片加载前需占位防布局跳动：用HTML width/height属性或CSS aspect-ratio+object-fit确保容器预留空间，避免回流；懒加载图片须提前占位，禁用JS补样式方案。
图片加载前没占位导致布局重排
浏览器解析 HTML 时，
width/height。
CSS 中用 aspect-ratio + object-fit 替代固定像素宽高
硬写 width: 300px; height: 200px; 会导致响应式失效或图片拉伸。现代方案是保留原始宽高比，用 CSS 控制容器占位：
- 给
- 在 CSS 中设置
.img-container { aspect-ratio: 4 / 3; }（按实际图比例填）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在构建时读取图片元数据 - 生成类似
- 即使 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事件后改样式——这时用户已经看到空白或错位了。 - 在 CSS 中设置
