一、经常使用简书和支付宝,打开应用加载的时候偶尔会看到这个页面
等到获取到数据之后,就变成了这个样子
作为一名客户端开发人员,总感觉这个操作很骚很6
问题:到底是怎么实现的呢?
工具:
- 一台越狱手机
- Reveal
- 另一个提供热点的可以设置成2G/3G网络的手机
- 一杯白开水
过程
- 首先让越狱手机连接开放热点的手机,然后将热点调成2G,为了就是让加载过程变慢,可以看到加载过程
-
在越狱手机上启动应用,然后找准时机,通过Reveal查看当时的页面布局,当你看到这个图的时候我想你就已经明白原理了
-
然后把网络切换回3G,因为网络环境太差了,直接请求失败了,再次刷新数据,看到了获取到数据的页面,如图
- 对比一下上面两张图,可以清晰的看到,在请求时有一个占位图,在请求到数据之后,占位图被移除,直接展示真实数据,整个过程给用户一种持续加载的感觉,提升用户体验
三、你以为这样就完了,不,还有更骚的,下面我们来看下糗事百科
分析过程和准备工作和上面是一样的
工具同上,只是加了个点水
分析:糗事百科在加载的时候,占位图会有一种不断刷新的感觉,建议将网络环境切换到较差的环境尝试
- 图有两张,第一张是文本和头像部分是透明的,放在上面;另一张是负责在下面不断偏移的底层图片
- 加载时,下面的图不断修改frame,相当于上面的不动,下面的图不断移动,造成上图透明的部分,被遮挡的部分,不断移动的效果
传送门
OC:
Somo
OCSkeleton
Swift:
SkeletonView