← 返回 Web 词条

骨架屏

Web需自己实现

Web 原生没有这个

Web 没有原生骨架屏元素或统一视觉规范,通常用样式绘制与最终内容相近的占位块。加载区域还应通过 aria-busy 告诉辅助技术内容正在更新。

通常怎么做:自定义 HTML / CSS 占位,并在加载容器上使用 aria-busy。

适用范围:桌面与移动端主流浏览器

社区一般叫它 Skeleton Screen · Content Placeholder

它是在真实内容还没加载出来时,先用灰色块勾出页面大致结构的占位画面。

  • 内容没出来前先显示的一块块灰条
  • 加载时先摆着的灰色方块
  • 页面还没好先看到的灰块轮廓
  • 骨架屏
  • 内容占位
  • 加载占位
  • 占位动画

其他平台的相似实现

iOS原生支持
Placeholder本平台没有对应叫法

Apple 使用 Placeholder 表达加载时的内容占位。

看 iOS 视角 →
Android需自己实现
该平台没有原生实现

通用 Android 和 Material 3 没有正式的骨架屏组件。

看 Android 视角 →

使用规范

什么时候用

  • 页面结构已经确定,但真实文字、图片或列表还在加载
  • 首屏或内容区预计会等待一小段可感知的时间
  • 希望让用户提前理解内容布局并减少加载完成时的跳动

什么时候别用

  • 操作耗时很短,骨架只会一闪而过
  • 无法预测最终内容结构 → 用 Loading Indicator 表示正在处理
  • 任务有可计算进度 → 用进度条给出真实进度

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。