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 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
vuex实现购物车功能
Jun 28 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
React实现评论的添加和删除
Oct 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
什么是python的id函数
2020/06/11 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
Delphi软件工程师试题
2013/01/29 面试题
公司董事长职责
2013/12/12 职场文书
上班迟到检讨书
2014/01/10 职场文书
活动策划邀请函
2014/02/06 职场文书
政府法律服务方案
2014/06/14 职场文书
生物学专业求职信
2014/07/23 职场文书
新学期感想
2015/08/10 职场文书
保险公司增员口号
2015/12/25 职场文书
初中地理教学反思
2016/02/19 职场文书