loading="lazy"不能单独防止布局抖动，因其仅控制请求时机而不预留空间；必须配合aspect-ratio或padding-top在容器级撑开高度，并确保width:100%、height:auto及object-fit正确协同。
直接用 loading="lazy" + aspect-ratio + object-fit 就能实现可靠延迟加载与占位，不需要 JS 控制占位容器高度——前提是浏览器支持，且 HTML 和 CSS 配合正确。
为什么 loading="lazy" 不能单独解决布局抖动
浏览器原生懒加载只控制图片是否发起请求，不预留空间。图片未加载时 <img> 高度为 0，导致后续内容上跳；等图一加载完，页面“啪”一下下移。这不是动画问题，是盒模型塌陷。
- 必须用容器级宽高比约束（
aspect-ratio或padding-tophack）提前撑开空间 -
loading="lazy"要配合width: 100%和height: auto才能被正确解析，否则某些 Safari 版本会忽略懒加载 - 若父容器是
flex或grid，需额外设align-items: center，否则aspect-ratio容器可能被拉伸或压缩
aspect-ratio 占位在旧版 Safari 中为何失效
Safari ≤15.4 完全忽略 aspect-ratio，且对 padding-top 在 height: 0 容器上的计算也不稳定——它会把百分比当 0 处理，导致占位塌成一条线。
- 降级方案必须同时满足：
position: relative+padding-top: 56.25%（16:9）+ 子元素position: absolute全覆盖 - 不能只写
padding-top，还得加min-height: 0.01px或line-height: 0防 Safari 忽略 - 用
@supports (aspect-ratio: 1)包裹现代写法，老浏览器自动 fallback 到 padding 方案
object-fit 与 srcset 配合时的常见错配
写了 srcset 却还是加载大图，或者裁剪错位，往往不是图片本身问题，而是 CSS 和 HTML 层级没对齐。
立即学习“前端免费学习笔记（深入）”；
-
sizes属性缺失 → 浏览器默认按100vw计算，选错w项；必须写成sizes="(max-width: 768px) 100vw, 50vw" -
object-fit: cover生效前提：父容器有明确尺寸（width+aspect-ratio或padding-top），且overflow: hidden开启，否则裁剪无效 - 混用
2x和w单位（如srcset="a.jpg 1x, b.jpg 2x, c.jpg 1000w"）→ 整个srcset被浏览器静默丢弃
渐变占位符动画如何避免掉帧和误触发
用 background-image: linear-gradient() 做占位底纹比透明 GIF 更轻量，但动画节奏和触发时机稍不注意就会显得卡顿或多余。
- 动画只作用于伪元素
::before，真实<img>保持opacity: 0直到load事件，避免从 0×0 尺寸开始缩放 -
@keyframes推荐用opacity脉冲（0.6 → 0.85 → 0.6），周期 1.8s；禁用transform: scale()，它触发 layout，滚动时明显掉帧 - 必须加
will-change: opacity，尤其在安卓 WebView 或低端 iOS 上，否则动画模糊、闪烁 - JS 只需监听
load，不要用IntersectionObserver提前启动动画——图没加载完就播动画，用户会觉得“假加载”
真正容易被忽略的是：所有占位逻辑都依赖容器尺寸可预测。一旦父级用了 flex: 1 或 grid-template-rows: 1fr 却没设最小高度，aspect-ratio 就失去锚点，整个占位链路崩掉。
