图片懒加载布局跳动的核心是容器高度未预设，应通过aspect-ratio、HTML宽高属性或固定尺寸提前锁定高度，避免仅设宽度不设高、滥用data-src、绝对定位无父高及JS动态改高。
图片懒加载时布局跳动，核心问题不是“图没出来”，而是“浏览器根本不知道它该占多高”。解决的关键，是让容器在图片加载前就拥有确定的高度——不是靠 JS 算，也不是靠空等，而是用 CSS 原生能力提前锁定。
用 aspect-ratio 预留响应式高度
这是目前最推荐的方式，兼容性已覆盖主流浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）：
- 给图片容器（如
<div>）或<img>自身设置aspect-ratio: 16 / 9（按实际图比例调整） - 必须配合明确宽度，例如
width: 100%或固定值，否则 aspect-ratio 无法推导出高度 - 加
display: block防止内联元素默认间距干扰 - 旧版 Safari（≤15.4）可用
padding-top回退：父容器设position: relative，子占位层用padding-top: 56.25%（对应 16:9）模拟
用 HTML width 和 height 属性声明原生尺寸
兼容性最好，连 IE 都支持，适合对旧浏览器有要求的项目：
- 直接在
<img>标签里写width="800" height="450" - 浏览器会自动按宽高比计算初始高度，即使 src 还没加载
- 配合
style="width: 100%; height: auto;"实现响应式缩放，比例依然保持 - 注意：数值应为原始图尺寸，不能随意填；若后端图尺寸不固定，需服务端返回宽高并注入到标签中
用背景色 + 固定宽高兜底防塌陷
适用于头像、商品图等尺寸较统一的场景，简单可控：
- 给图片容器设固定宽高，例如
width: 80px; height: 80px; - 加中性背景色：
background-color: #f5f5f5; - 若需骨架动画，可用
::before伪元素叠加linear-gradient脉冲效果 - 搭配
object-fit: cover让真实图片居中裁剪填充，避免拉伸变形
避坑要点：这些操作会让占位失效
很多布局抖动其实源于看似合理、实则破坏占位的写法：
- 只写
max-width: 100%或width: 100%，却不设高度或 aspect-ratio —— 容器初始高度仍是 0 - 用
data-src替代src启动懒加载 —— 浏览器完全忽略 data-src，不触发任何占位逻辑 - 给
position: absolute的<img>单独加loading="lazy"—— 父容器若无高度，IntersectionObserver 无法正确判断可视区 - 在图片加载完成前，用 JS 动态修改容器高度 —— 引入时序不确定性，CLS 易超标
