图片加载方式
2019-05-29 本文已影响0人
nCov
1 渐进式,就是我们常见的模糊变清晰。
1.1我有这样做图片做两张,一张模糊,一张清晰,image组件放两个,image组件这里简称 A与B,初始状态下:A组件src链接模糊照片,B组件src链接清晰照片且隐藏,监控B组件图片加载情况如完成,A组件隐藏B组件显示,这个方法简单直接易懂。
1.2后来网上一看,人家是这样玩的,利用PS把图片保存的时候勾选连续,声明:我没有去实际操作,我理解为是当勾选连续保存图片后,该图片本身就会是模糊到清晰的一过程,这样的话实现图片加载模糊得清晰,只需要一张图片,一个image组件,挺好. 小提示;jpeg只需勾选连续,png 要勾选交错.
2 标准式 就是一张图片从上到下的加载方式
2.1整个图片从上到下一段一段的往下加载,在等待加载的过程中有空白位,体验上不是最佳选择,具体这样的效果是怎么实现的我没去实践,应该是上传图片的时,把图片裁减成多段, 然后分段显示。
3 预占位式 给图片加载设置预占位
3.1 比如给一个层弄个背景色,层内来个小的占位图 和 image组件,初始状态下占位图显示 image隐藏,等待image组件加载完成,加载完后占位图隐藏 ,image显示,跟1.1有点像
外篇 等待加载,先来个loading等待,数据先加载,延迟300ms 让loading消失,用户一打开图片就显示了
,前提用户端网速要好!