用容器+aspect-ratio撑空间、linear-gradient扫光动画、::before伪元素实现不抖不闪可访问的占位效果；JS仅切换class，样式完全解耦。
直接用 aspect-ratio 容器撑开空间 + linear-gradient 背景动画 + ::before 伪元素实现，就能做出不抖、不闪、可访问的占位效果；JS 只负责切换 class，样式层完全解耦。
为什么不能直接给 img 加背景色或渐变？
因为 img 默认是 inline 元素，懒加载时 src 常为空或挪到 data-src，此时宽高为 0×0，background 根本不会渲染——你看到的“空白”其实是父容器塌陷造成的。真正能撑开空间的是显式设了尺寸的容器（比如 <div class="img-skeleton"></div>），不是 img 自身。
- 必须用容器包裹，且容器要设
width和aspect-ratio: 16 / 9（或对应比例） - 老 Safari（iOS 15.0–15.3）不支持
aspect-ratio，得 fallback 到padding-top: 56.25%，但前提是父容器有明确width - 别用
height: 0 + padding-top + absolute定位图片——这会让骨架脱离文档流，影响屏幕阅读器和 SEO
linear-gradient 扫光动画总不动？检查这三处
写完 @keyframes shimmer { to { background-position: 200% 0; } } 却没效果，大概率不是语法错，而是背景本身不可平移。
- 背景必须是「有纹理」的：用
linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)，别用纯色background: #f0f0f0 -
background-size必须大于容器宽度：比如background-size: 200px 100%（不能用rem或vw，iOS Safari 会忽略） - 动画必须配
background-repeat: no-repeat，否则光条会重复出现、跳变
图片加载完成时怎么避免生硬跳变？
加载完成瞬间直接显示，用户会觉得“啪”一下弹出来。过渡必须由浏览器原生接管，不能靠 JS 控制帧或 setTimeout。
立即学习“前端免费学习笔记（深入）”；
- 给
img设初始状态：opacity: 0; transition: opacity 0.3s ease - 监听
img.onload后只加一个 class（如is-loaded），该 class 仅含opacity: 1 - 如果骨架是
::before伪元素，记得在img.is-loaded::before里写display: none，否则会叠在图片上 - 千万别用
visibility: hidden → visible切换：它不触发动画，且可能引发重排
最易被忽略的是骨架的圆角、阴影、边框宽度，必须和真实图片完全一致。哪怕差 1px，加载完成后就会跳动；另外，所有骨架容器必须加 overflow: hidden，否则渐变滑出圆角会露底色。
