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

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

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

推荐阅读更多精彩内容