html照片从模糊到清晰的渐变加载显示方法

系统 2150 0

1.背景介绍
在网络相册应用中用户查看 照片 是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差。

 

2.现状
现在 加载 照片的 方法 主要有一下两种:
(1)最原始的方式在 html 页面直接用img标签加载 显示 照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好
(2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示到页面中。以下是流程图:

该方法用户可以先看到的是 模糊 的小图,等照片的原图加载完后才能看到真实的照片,如果网络慢的话中间等待的时间也是比较长的,用户就一直看到模糊的小图,用户体验也不好。

 

3.我们的解决方案
QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看照片的需求:第一时间看到照片大概情况和尽可能快的看到 清晰 的原图。该方法使用缩略图和原图同时加载并叠加显示,先加载缩略图并拉大显示,大图叠加在缩略图上面同时加载。缩略图很小通常很快就能给用户看到照片模糊的效果,大图加载过程中从上往下逐步覆盖缩略图,这样用户就可以看到加载过程中的大图。
(1)示例图

 

如上如所示,本方法的处理步骤是:
1.获取照片缩略图和原图的URL,获取照片的长和宽;
2.加载并显示照片缩略图,将缩略图按照片的长和宽拉伸显示,这时用户看到的是模糊的效果;
3.加载并显示照片原图,将原图叠加在缩略图上面显示,原图加载多少就显示多少,没有加载的还是显示缩略图,逐步将缩略图覆盖掉,原图在加载的过程中用户看到的是照片从模糊到清晰的 渐变 效果。

 

4.原图加载完后,原图已经全部将缩略图覆盖,这时用户看到的是真实的原图。此时可以隐藏缩略图防止缩略图干扰PNG或GIF等有透明效果的图片显示。
(2)示例代码

          <!–设置照片的大小–>
<div style=”width:400px;height:300px;”>
<!–小图拉大显示–>
<img src=”small_url” style=”width:100%;height:100%;”/>
<!–原图叠加在小图上面–>
<img src=”big_url” style=”width:100%;height:100%;position:absolute;top:0px;left:0px;”/>
</div>
        

 

转载: 青豆前端 » html照片从模糊到清晰的渐变加载显示方法

html照片从模糊到清晰的渐变加载显示方法


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论