正确做法是用容器承载骨架，显式设置宽高或aspect-ratio，通过::before伪元素实现流光动画，并确保真实图片绝对定位覆盖、服务端与客户端结构一致。
img标签加载前必须用容器承载骨架，不能直接样式化![]()
直接给 <img> 加 background-color 或 border 几乎无效——它默认是 inline 元素，不设 display: block 和显式宽高，背景根本不会渲染；更糟的是某些框架（如 Vue 的 v-for 列表）会自动包裹 <img>，导致你写的样式匹配错层级。
正确做法是用一个语义中立的容器（比如 <div class="img-placeholder"></div>），显式设置 width、height 或 aspect-ratio，再通过 ::before 伪元素画骨架：
-
aspect-ratio: 16 / 9比固定height更可靠，适配不同设备缩放 - 伪元素用
content: ""+position: absolute，父容器需设position: relative - 避免在容器里塞
<img>同时又写骨架样式——结构混杂易触发重排
CSS动画必须用 background-position 位移，禁用 opacity 循环
主流“流光”效果本质是模拟光线扫过，靠 linear-gradient 背景图横向位移实现。用 opacity 在 0.2–0.8 之间循环，视觉上只是闪烁，毫无“加载中”的质感，且 Safari 15.4–16.3 和部分安卓 WebView 会掉帧甚至不触发动画。
推荐写法：
`.skeleton-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}`
- 动画时长控制在
1.2s–1.8s：太快浮躁，太慢削弱反馈感 - 对
prefers-reduced-motion: reduce用户关闭动画：@media (prefers-reduced-motion: reduce) { .skeleton-img::before { animation: none; } } - 别用
transform: translateX()替代背景位移——它会触发合成层，低端机易卡顿
真实图片必须绝对定位覆盖，加载完成才切换显隐
骨架和真实图片不能靠 display: none 或 visibility: hidden 切换，前者破坏文档流引发重排，后者保留占位但不可交互；也不能用 opacity: 0 → 1 动画盖在骨架上——图片还没加载完就触发动画，用户会看到白屏闪一下。
标准流程是：
- 真实
<img>放在骨架容器内部，设position: absolute、top: 0、left: 0、width: 100%、height: 100% - 初始状态：
opacity: 0+visibility: hidden - 监听
img.onload事件，成功后移除骨架类名，同时设visibility: visible+opacity: 1，配合transition: opacity 0.2s ease - 失败回退（
onerror）时保留骨架，并加一层提示文字（如“加载失败”），alt不触发重绘，不能顶替
SSR/ hydration 场景下骨架必须和服务端 HTML 一致
服务端已渲染出真实内容，客户端 hydration 时如果又插入骨架结构，会导致“闪一下”——这不是体验优化，而是 bug。骨架屏必须和服务端输出的首屏 HTML 结构完全一致：相同标签、相同 class 层级、相同嵌套顺序，只把文本和图片替换成占位元素。
关键约束：
- 服务端不能输出骨架结构；客户端 JS 必须在
document.readyState === 'complete'后判断是否需要激活骨架 - 若用
keep-alive或缓存数据，需监听activated（Vue）或useLayoutEffect（React）重置加载态 - 所有骨架容器加
contain: layout paint style提升性能，但需包裹@supports (contain: layout)兼容旧 Safari
最容易被忽略的是尺寸一致性：标题行高差 1px、图片 aspect-ratio 少写一位小数，加载完成后就会明显“弹一下”。这不是动画问题，是结构没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
