移动端图片加载空白感源于容器高度塌陷，aspect-ratio通过原生宽高比预留空间避免重排跳动，需作用于img直接父容器并配合底色层与transition实现视觉平滑。
移动端图片加载前的空白感，本质是渲染节奏没对齐：图片还没下载解码完成，<img> 占位区域高度为 0 或塌陷，父容器没设高、也没背景色，就透出底层黑/白底——这不是“bug”，是浏览器默认行为。
为什么 aspect-ratio 能稳住布局不跳动
aspect-ratio 是 CSS 原生宽高比控制属性，它让容器在内容（图片）加载前就按比例预留空间，彻底避免 reflow 引起的页面抖动。相比 JS 计算或 padding-top hack，它语义清晰、无需脚本、兼容性已覆盖主流 Android/iOS（Chrome 88+、Safari 15.4+）。
- 必须作用于
<img>的**直接父容器**（如<div class="img-wrap">），不能只写在<img>上 - 搭配
width: 100%使用，高度由宽高比自动推导，不需要写height - 若图片原始宽高比未知，可设保守值如
aspect-ratio: 16 / 9，或服务端返回后动态 patch
空白感不止是“没图”，更是“没底色”
光靠 aspect-ratio 只解决了布局跳动，但加载中仍是一片透明。此时空白感来自视觉断层——用户看到的是“什么都没有”，而不是“正在来”。解决办法是给容器加预加载底色：
- 最简方式：
.img-wrap { background-color: #f5f5f5; }，但无法区分加载中/失败状态 - 推荐方式：用
::before伪元素叠加底色层，<img>自然叠在其上，不影响点击和事件冒泡 - 伪元素必须带
content: ""和display: block，且父容器需设position: relative - 加
transition: opacity 0.2s到<img>，可缓解加载完成瞬间的闪屏
uni-app / Vue 项目里 image 组件不响应 aspect-ratio？
uni-app 的 <image> 是原生组件封装，不支持直接设 aspect-ratio；Vue 中若用 <img> 但父容器没尺寸，也一样塌陷。关键点在于：
立即学习“前端免费学习笔记（深入）”；
- 不要把
aspect-ratio写在<image>或<img>上，而是写在它的外层<div> - 确保该
<div>没被其他样式（如flex: 1或height: auto）覆盖掉计算逻辑 - 在
onLoad回调里别再手动改height，否则会破坏 aspect-ratio 的声明式布局 - 真机调试时注意：iOS Safari 15.4 之前不支持
aspect-ratio，需降级为padding-top方案
真正难的不是写对一行 aspect-ratio，而是在多端混合渲染、懒加载、缓存策略交织的场景下，保证底色层、占位框、图片本身三者渲染时序对齐。很多“切后台才显示”的问题，其实是 visibility hidden / display none 切换触发了重绘，但底色层没同步更新——这种细节，往往要靠真机连 devtools 抓帧才能定位。
