每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票设计碎碎念(一)
#01
先简单介绍图片两种加载方式
1.预加载:理解为一个勤奋的小小人,提前预习,将需要的图片先加载,等到用户想看的时候,随时掏出来
预加载在用户打开页面时,图片会很快的呈现出来,避免大图在长时间的加载过程中遗失用户,这种用户体验是通过增加服务器负担换取的
2.懒加载:在触发某种事件/页面在可视区和即将滚动到可视区域后才开始干活
页面需要加载大量图片的时候,使用懒加载可以实时延迟加载页面可见区域以外的内容,从而使页面加载更流畅
#02
进入正题
图片加载怎么实现是代码层面的东西,但图片在加载中、加载失败的呈现样式是需要我们去定义的
先简单看看几种图片在加载中展现的样式
1.文字版,这种方式在图片加载完成后,页面会重新布局
题外话:
接下来简单放几张我个人的写真
[图片]
这张拍的不怎么好
[图片]
这张还可以
[图片]
剩下都是没有P过的
[图片]
[图片]
[图片]
图片比较大,加载会久一些~
2.占位图
芒果视频,在占位图上面显示图片加载的过程,视觉上“逐渐覆盖掉占位图”
B站,会在图片完全加载完毕后替换掉占位图,不会像芒果一样能看见图片加载的进度
3.颜色预置
YouTube, 和骨架屏用同一种颜色、样式占位,无需提供图片
Google 图片搜索,采用图片主要色彩占位
4.模糊加载
模糊加载需要用到两张图片,用一张几 kb ~十几 kb 的模糊小图片加上高斯模糊的滤镜,就可以实现图片模糊的效果
#03
简单总结
占位图的区域需要和实际图片高宽一致才不会出现重新布局的情况
同时占位图也可以提高用户的体验,明确显示此处有图片正在加载,避免弱网和图片较大的时候,加载过慢显示大量空白的问题
同时还需要准备一张图片用于图片加载失败显示,比如
(完~草率收尾)
微信公众号:柠檬设计笔记
Powered by Froala Editor
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论