图片加载中的各种占位样式

#01

先简单介绍图片两种加载方式

1.预加载：理解为一个勤奋的小小人，提前预习，将需要的图片先加载，等到用户想看的时候，随时掏出来

预加载在用户打开页面时，图片会很快的呈现出来，避免大图在长时间的加载过程中遗失用户，这种用户体验是通过增加服务器负担换取的

2.懒加载：在触发某种事件/页面在可视区和即将滚动到可视区域后才开始干活

页面需要加载大量图片的时候，使用懒加载可以实时延迟加载页面可见区域以外的内容，从而使页面加载更流畅

#02

进入正题

图片加载怎么实现是代码层面的东西，但图片在加载中、加载失败的呈现样式是需要我们去定义的先简单看看几种图片在加载中展现的样式

1.文字版，这种方式在图片加载完成后，页面会重新布局（最好不要用）

题外话：

接下来简单放几张我个人的写真

[图片]

这张拍的不怎么好

[图片]

这张还可以

[图片]

剩下都是没有P过的
[图片]

[图片]

[图片]

图片比较大，加载会久一些~

​
2.占位图

芒果视频，在占位图上面显示图片加载的过程，视觉上“逐渐覆盖掉占位图”

B站，会在图片完全加载完毕后替换掉占位图，不会像芒果一样能看见图片加载的进度

3.颜色预置

YouTube, 和骨架屏用同一种颜色、样式占位，无需提供占位图，提供色值就好

Google 图片搜索，采用图片主要色彩占位

4.模糊加载

designsystemsrepo.com

模糊加载需要用到两张图片，用一张几 kb ~十几 kb 的模糊小图片加上高斯模糊的滤镜，就可以实现图片模糊的效果

#03

简单总结

占位图的区域需要和实际图片高宽一致才不会出现重新布局的情况

同时占位图也可以提高用户的体验，明确显示此处有图片正在加载，避免弱网和图片较大的时候，加载过慢显示大量空白的问题

同时还需要准备一张图片用于图片加载失败显示，比如

（完~草率收尾）

微信公众号：柠檬设计笔记