骨架屏（ Skeleton Screen ）

骨架屏

---

什么是骨架屏

骨架屏英文叫 Skeleton Screen，也被称为加载占位图。它是在页面数据尚未加载前先给用户展示出页面的大致结构，进而等到数据请求返回后再显示页面的数据内容，从而替换它。这常用于文章列表、新闻动态列表等内容结构相一致的页面。国内的淘宝、饿了么、知乎、得到，国外的 Facebook 等的网站都有应用，相信这种加载方式会被越来越多的应用采用。

加载完成前

加载完成后

为什么要使用骨架屏

在使用终端设备请求数据时都会出现一定的延迟，屏幕从而会出现一大片空白，以前对于这段等待时间的处理大多数都是采用菊花图加载动画或者类似于这种的加载动画。

loading

这种方式请求时页面会卡住，直到请求完成，用户期间无法进行任何的操作，只能看着加载动效图，给人一种死机的感觉，体验差。为了进一步提升用户的体验，于是就出现了另一种加载方式——骨架屏（ Skeleton Screen ）

骨架屏的优势

1. 锁屏 Loading 在一定程度上限制了用户的操作，而骨架屏不干扰用户的操作。
2. 用户对于加载的内容有一个大致的框架。
3. 弱网络环境下极大的优化了用户体验。

怎么实现骨架屏

原理：在不改变页面布局下，隐藏图片和文字，通过样式的覆盖，使其展示为灰色块。等到加载完成后，将修改后的元素和样式提取出来

步骤：1、创建与显示内容相似的 html 结构
2、在需要显示内容的元素上增加背景色

方式：1、简单堆砌出元素结构
2、使用背景动画，修改 css 样式

下篇怎么实现骨架屏实例

加载前

加载后

加载前

加载后