Javascript实现图片加载从模糊到清晰显示的方法


Posted in Javascript onJune 21, 2016

1.背景介绍

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

2.现状

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

Javascript实现图片加载从模糊到清晰显示的方法

3.我们的解决方案

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

(1)示例图

Javascript实现图片加载从模糊到清晰显示的方法

如上如所示,本方法的处理步骤是:
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 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
jquery中post方法用法实例
Oct 21 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 #Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 #Javascript
jQuery获取元素父节点的方法
Jun 21 #Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
jQuery插件扩展测试实例
Jun 21 #Javascript
You might like
NT IIS下用ODBC连接数据库
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python解析xml文件操作实例
2014/10/05 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python读取二进制mnist实例详解
2017/05/31 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python之pymysql的使用小结
2019/07/01 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
python中wx模块的具体使用方法
2020/05/15 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
购房意向书范本
2014/04/01 职场文书
加入学生会演讲稿
2014/04/24 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS