APP图片加载样式汇总

App要与服务器进行数据交换，服务器接收到请求之后向App传输相应数据。在这个过程中，由于网络原因，需要花费一定时间，这个时候就要用到loading加载。Loading需要做两件事：一是告诉用户APP在处理数据，二是要避免用户因等待而烦躁。在此对APP图片的加载样式做出总结。

1.无占位符或预设图

---

特点：在整个页面加载过程中，现将文本加载出来，图片在加载完成之前暂不出现，目前已渐渐舍弃；

优点：加载速度快，程序简单。

缺点：或许会丢掉重要的信息，无法建立信息获取的闭环。另外容易因为图片的突然出现，影响用户的阅读顺序，用户体验感差。

2.有占位符或预设图

---

特点：先加载框架，再加载框架内的数据。一般文字先加载出来，由于图片加载慢，会用占位符或者预设图片来填充。

优点：先加载文字，保证用户阅读的顺畅性。

缺点：或许会丢掉重要的信息，无法建立信息获取的闭环。

样式：目前主流有如下几种样式（欢迎补充）

2.1  无图样式

2.1.1  灰色无图样式

在图片加载完成之前，在图片的位置先显示一个灰色的占位符。

灰色无图样式

2.1.2  彩色无图样式

在图片加载完成之前，在图片的位置先显示一个彩色的占位符，具体的颜色可以按照图片的颜色读取，也可以按照某种规律设置。

彩色无图样式

2.2  有图样式

2.2.1  灰色+logo样式

在给一个默认占位符图片的基础上，加上APP的logo，起到传达品牌作用。

灰色+logo样式

2.2.2  APP主色+logo样式

在图片占位符的基础上，加上APP的logo，宣传品牌。不同的是，占位符图的背景会根据APP的风格或者图片的颜色整体的排布，保证的APP风格的延续性，让用户在阅读的时候感觉很顺畅，降低用户的焦躁感。

例如：毒物APP的图片都是以黑色为主色调，那么图片占位符就用黑色+毒物的logo；聚美APP的图片都是以白色为主色调，那么占位符就用白色+聚美的logo。

APP主色+logo样式

2.2.3  灰色+自定义图标样式

在灰色占位符的基础上，加上icon，这个icon可以按照APP的内容确定。

例如：QQ音乐的自定义图标是一个光盘icon，腾讯新闻的自定义图标是一个链接icon。

灰色+自定义图标样式

目前主流的样式，我总结的基本就是这些，欢迎指导和补充！