#01

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

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

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

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

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

#02

进入正题

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

先简单看看几种图片在加载中展现的样式

1.文字版，这种方式在图片加载完成后，页面会重新布局

题外话：

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

[图片]

这张拍的不怎么好

[图片]

这张还可以

[图片]

剩下都是没有P过的

[图片]

[图片]

[图片]

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

2.占位图

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

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

3.颜色预置

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

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

4.模糊加载

designsystemsrepo.com

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

#03

简单总结

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

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

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

（完~草率收尾）

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

Powered by Froala Editor