Javascript实现图片加载从模糊到清晰显示的方法
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>
以上就是本文的全部内容，了解更多JavaScript的语法，大家可以查看：《JavaScript 参考教程》、《JavaScript代码风格指南》，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于JavaScript循环遍历的24个方法,文中对每种方法都给出了详细的实例代码,方便大家理解学习,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了JS使用canvas绘制旋转风车动画，有加速减速启动停止功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文介绍了JS中空值合并操作符??的用法,包括如何使用它来判断数据是否为“合法数据”,即非空字符串、非undefined和非null,下面就一起来了解一下,感兴趣的可以了解一下2024-09-09
这篇文章主要给大家介绍了关于JavaScript获取地址栏参数的方法实现,项目中经常遇到获取上个页面跳转过来获取当前的参数,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
本文解决方案的基本思路是点击就将按钮设为disabled,然后根据cookie判断是否设置过期时间,将手机利用ajax提交到后台的发短信接口，就可以了2015-05-05
利用js动态加载js文件到页面，并在确定加载完成后调用相关function2011-07-07
JavaScript webpack模块打包器如何优化前端性能
本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了JavaScript原型链及常见的继承方法,文章围绕主题展开详细的内容介绍，具有一定的的参考价值，需要的朋友可以参考一下2022-07-07
下面小编就为大家带来一篇JavaScript之创意时钟项目。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Javascript实现返回上一页面并刷新的小例子，有需要的朋友可以参考一下2013-12-12
最新评论