用aspect-ratio容器撑开空间配合background渐变+伪元素动画实现不抖不闪可访问占位；JS仅切换class，样式解耦；需fallback老Safari；shimmer动画需background-position平移+will-change优化；图片加载用opacity过渡+伪元素隐藏确保视觉一致。
直接用 aspect-ratio 配合 background 渐变 + 伪元素动画，就能做出不抖、不闪、可访问的占位效果。JS 只负责切换 class，样式层完全解耦。
为什么必须用容器元素撑开空间，而不是直接给 img 加背景？
因为未加载的 img 默认是 inline 元素，宽高为 0×0，background-color 或 background-image 根本不会渲染出来——你看到的“空白”其实是父容器塌陷造成的。真正能撑开空间的是容器（比如 <div class="img-wrapper"></div>），不是 img 自身。
- 必须显式设置容器的
width和aspect-ratio（如aspect-ratio: 16 / 9），否则比例随视口变化而错乱 - 老 Safari（iOS 15.0–15.3）不支持
aspect-ratio，得 fallback 到padding-top: 56.25%，但前提是父容器有明确width - 别用
height: 0+padding-top+ 绝对定位图片——这会让骨架脱离文档流，影响屏幕阅读器和 SEO
linear-gradient 脉冲动画怎么写才不糊、不卡？
骨架动画本质是模拟“光扫过”的视觉暗示，不是靠多层遮罩或 GIF。用纯 CSS 渐变背景 + 平移动画最轻量，但参数稍不对就容易在安卓 WebView 里掉帧或发虚。
- 推荐写法：
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)+background-size: 200% 100%+animation: shimmer 2s ease infinite - 动画关键帧只平移背景位置：
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } - 必须加
will-change: background-position或至少backface-visibility: hidden，否则部分低端安卓 WebView 会糊 - 别给骨架层本身加
opacity动画——它和背景动画叠加后容易变成一块均匀灰，失去“脉冲”感
图片加载完成时，怎么避免生硬跳变？
加载完成瞬间直接显示，用户会觉得“啪”一下弹出来。过渡必须由浏览器原生接管，不能靠 JS 控制帧或 setTimeout。
立即学习“前端免费学习笔记（深入）”；
- 给
img设初始状态：opacity: 0; transition: opacity 0.3s ease - 监听
img.onload后只加一个 class（如is-loaded），该 class 仅含opacity: 1—— 这样过渡由浏览器触发，不依赖 JS 动画循环 - 如果骨架是
::before伪元素，记得在img.is-loaded::before里写display: none，否则会叠在图片上 - 千万别用
visibility: hidden → visible：它不触发动画，且可能引发重排；也别用display: none → block：破坏文档流
最易被忽略的点是：骨架的圆角、阴影、边框宽度，必须和真实图片完全一致。哪怕差 1px，加载完成后也会轻微“跳动”——这不是动画问题，是视觉一致性没对齐。
