直接给结论：在网格布局中直接使用原生 loading="lazy"，几乎必然导致布局塌陷和视觉跳动。原因很简单——浏览器只负责延迟图片请求，却不会主动预留空间。因此，必须配合容器级的宽高比控制与伪元素动画，才能实现“首屏加载不跳动、滚动加载不闪屏”的流畅体验。
为什么 Grid 里用原生 loading="lazy" 会塌陷？
默认情况下，Grid 子项没有固定高度，img 在加载前尺寸为 0×0——这并非响应式设计能自动弥补的问题，而是盒模型的基础特性：没有内容，容器就不会撑开。结果显而易见：首屏图片一旦加载，下方整行卡片会突然下移。这不是动画卡顿，而是布局抖动。
具体来看，存在三个关键瓶颈：
- Grid 容器设置了
gap或align-items: start，但子项未撑开高度，导致img上的aspect-ratio无法生效——因为父项高度未定义，比例计算直接落空。 object-fit在无尺寸约束的容器中完全失效，裁剪和缩放均不可控。你想让图片填满卡片？做不到，因为容器本身都不确定自己该多大。- 旧版 Safari（≤15.4）直接忽略
aspect-ratio。这相当于将所有占位逻辑归零，整个方案从根上失效。
撑开高度的实操方案：aspect-ratio + position: relative
不要指望 Grid 自动计算图片高度。正确做法是在每个网格单元（比如 .card 或 .grid-item）上强制撑开比例空间。
- 为网格项添加
aspect-ratio: 16 / 9，并设置position: relative——这是后续伪元素动画和object-fit能够正常工作的前提。 - 图片本身使用
width: 100%; height: auto; object-fit: cover;，并且必须包裹在overflow: hidden的容器内，否则裁剪溢出会破坏布局。 - 降级兼容 Safari ≤15.4：用
@supports not (aspect-ratio: 1)包裹一套padding-top: 56.25%，再补一个min-height: 0.01px——否则padding百分比会被 Safari 当作 0 处理，导致整个降级方案失效。
伪元素动画：只动占位层，不碰真实图片
直观的做法是对 img 直接添加 opacity 或 transform 动画，但这样会从 0×0 尺寸开始播放——视觉上非常怪异。正确做法是用 ::before 覆盖一层动态占位，等图片加载完成再切换状态，全程不影响布局。
具体要点：
img初始设置opacity: 0; position: absolute; inset: 0;，确保它覆盖伪元素但不可见。::before使用linear-gradient制作条纹底纹，配合background-position动画——用transform会触发重排，得不偿失。- JS 监听
load事件后添加.loaded类，仅触发img的opacity: 1过渡。不改变布局、不撤除占位、不引起二次抖动。 - 注意：禁用
visibility: hidden。它会让父容器高度塌回 0，占位逻辑形同虚设。
响应式断点：不要用 media query 硬切宽高比
为不同屏幕编写多套 aspect-ratio 值（比如手机 4/3、桌面 16/9）看似合理，实则危险。Grid 项高度由 CSS 实时计算，断点切换时若 JS 正在加载图片，可能卡在中间比例导致错位——这个错位不是轻微抖动，而是整行重新排布。
推荐做法：统一使用一个安全比例，如 aspect-ratio: 4 / 3，覆盖多数内容场景。遇到极端比例（如竖图），后端返回时额外携带 data-aspect="9/16"，JS 动态设置 style="--aspect-ratio: 9/16"，避免走 CSS 硬编码。
另外，不要在 @media 里修改 aspect-ratio——浏览器不会触发重绘，旧值残留，你会看到比例张冠李戴。
最后，容易被忽略的是：网格项的 min-height 和 align-items 存在冲突。即使写了 aspect-ratio，如果父 Grid 设置了 align-items: center，而子项未设 height: 100%，Safari 就会将其压扁——这个细节不调试根本看不出，但一旦出现，整个比例占位功亏一篑。
