HTML怎么实现骨架屏等待动态内容加载-html教程-PHP中文网

骨架屏是用灰色块模拟真实内容结构的加载占位技术，能提前占位、避免布局跳动，提升用户感知性能；而loading.gif仅提供局部动效，易破坏布局流且无法传递内容结构预期。

html怎么实现骨架屏等待动态内容加载

什么是骨架屏，为什么不用 loading.gif

骨架屏不是动效加载图标，而是用灰色块模拟真实内容的结构——比如头像位置放个圆角矩形，标题行用长条灰块，段落用三段不等长灰条。用户感知到的是“内容快来了”，而不是“系统在卡”。loading.gif 在首屏或长列表里会破坏布局流，而骨架屏能提前占位、避免重排，尤其对 SSR 或 hydration 前的 React/Vue 应用更友好。

CSS 实现骨架屏的关键技巧

核心是用 background-image 搭配 linear-gradient 造出“呼吸感”动画，同时确保骨架元素尺寸与真实 DOM 一致（否则 hydration 后会跳动）：

所有骨架元素必须设置和真实内容完全相同的 width、height、margin、padding，推荐用 CSS 自定义属性统一控制
动画用 background-image: linear-gradient(...) + background-size + animation，不要用 opacity 淡入——它无法体现“内容正在浮现”的隐喻
避免给骨架容器设 display: none，应该用 visibility: hidden 或 class 切换，否则 Vue/React 的 diff 会误判节点销毁

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
@keyframes loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

Vue/React 中如何安全切换骨架屏与真实内容

关键不是“显示/隐藏”，而是“复用 DOM 节点”。如果骨架和真实内容结构不同，框架 hydration 时会丢弃骨架节点、重建真实节点，导致闪动甚至事件绑定丢失：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

Vue：用 v-if + v-else 是错的；应始终渲染同一组元素，仅通过 class 控制视觉状态，例如：{{ data.title }}
React：避免 {isLoading ? : }；改用 {data ? : }，且 Skeleton 组件返回和 Content 完全一致的 JSX 结构（同标签、同 className、同嵌套层级）
服务端渲染场景下，骨架屏只应在客户端生效：检查 typeof window !== 'undefined' 再挂载动画，否则 Node 环境报错