骨架屏和 loading 的优缺点

骨架屏 Skeleton Screen Loading 也叫加载占位图，是近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位图，与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。

场景

• 适用于布局排版固定的内容区域

骨架屏所展现的是内容的大概轮廓，如果内容布局和排版不是固定的，那么轮廓和内容布局的巨大差异，不仅不能给用户顺畅和期待感，反倒会造成落差。因此骨架屏适用于布局排版固定的内容区域，例如列表、文章、个人信息。注意：如果内容区域有空页面的情况，也不建议使用骨架屏。

• 建议配合其他加载技术一起使用

用户的网络环境是复杂的，如果加载持续时间很久，单凭骨架屏起不到流畅过渡的效果，建议配合懒加载（先文字后图片）、逐条加载、预加载等技术，以达到更出色的体验。

实现方式

打开开发者模式，将 network 改成 slow 3G 效果比较明显。

1.使用骨架屏图片代替 loading 动画

将图片编译成 base64 编码格式可以节省网络请求，使得骨架屏更快显示

缺点：如果布局设计改变了，这个骨架屏需要重新设计。

2. HTML + CSS 背景色来堆砌骨架

参考案例