简书、支付宝、糗事百科 优化加载的骚操作

一、经常使用简书和支付宝，打开应用加载的时候偶尔会看到这个页面

IMG_0015.PNG

等到获取到数据之后，就变成了这个样子

IMG_0016(1).PNG

作为一名客户端开发人员，总感觉这个操作很骚很6

问题：到底是怎么实现的呢？

工具：

• 一台越狱手机
• Reveal
• 另一个提供热点的可以设置成2G/3G网络的手机
• 一杯白开水

过程

1. 首先让越狱手机连接开放热点的手机，然后将热点调成2G，为了就是让加载过程变慢，可以看到加载过程

2. 在越狱手机上启动应用，然后找准时机，通过Reveal查看当时的页面布局，当你看到这个图的时候我想你就已经明白原理了

   
   企业微信截图_5b6a663c-4f10-4c34-a58a-843f12975c61.png

3. 然后把网络切换回3G，因为网络环境太差了，直接请求失败了，再次刷新数据，看到了获取到数据的页面，如图

   
   80161524819045_.pic_hd.jpg
4. 对比一下上面两张图，可以清晰的看到，在请求时有一个占位图，在请求到数据之后，占位图被移除，直接展示真实数据，整个过程给用户一种持续加载的感觉，提升用户体验

三、你以为这样就完了，不，还有更骚的，下面我们来看下糗事百科

分析过程和准备工作和上面是一样的
工具同上，只是加了个点水

80231524820331_.pic_hd.jpg
80241524820335_.pic_hd.jpg
80251524820339_.pic_hd.jpg
80261524820342_.pic_hd.jpg

分析：糗事百科在加载的时候，占位图会有一种不断刷新的感觉，建议将网络环境切换到较差的环境尝试

1. 图有两张，第一张是文本和头像部分是透明的，放在上面；另一张是负责在下面不断偏移的底层图片
2. 加载时，下面的图不断修改frame，相当于上面的不动，下面的图不断移动，造成上图透明的部分，被遮挡的部分，不断移动的效果

传送门

OC：
Somo
OCSkeleton

Swift:
SkeletonView