JS实现图片预加载无需等待


Posted in Javascript onDecember 21, 2012

网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面。不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片。

知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来。因此,实现图片预加载就成为图片浏览器的核心功能了。

做过图片翻转效果的朋友其实都知道,要让图片轮换的时候不出现等待,最好是先让图片下载到本地,让浏览器缓存起来。这时,一般都会用到js里边的Image对象。一般的手段无非这样:

function preLoadImg(url) { 
var img = new Image(); 
img.src = url; 
}

通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。实际上,这里用到的预下载功能也和这基本一致。图片预下载下来后,通过 img的width和height属性,就能知道图片的宽和高了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img.width的时候,图片还没有完全下载下来。因此,需要用一些异步的方法,等到图片下载完毕的时候才会再对img的width和height进行调用。

实现这样的异步方法实际上不难,图片的下载完毕事件也很简单,就是简单的onload事件。因此,我们可以写出下面的代码:

function loadImage(url, callback) { 
var img = new Image(); 
img.src = url; 
img.onload = function(){ //图片下载完毕时异步调用callback函数。 
callback.call(img); // 将callback函数this指针切换为img。 
}; 
}

好了,再来写一个测试用例。
function imgLoaded(){ 
alert(this.width); 
} 
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

在firefox中测试一下,发现不错,果然和预想的效果一样,在图片下载后,就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。

不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。

经过对多个浏览器版本的测试,发现ie6、opera都会这样,而firefox和safari则表现正常。其实,原因也挺简单的,就是因为浏览器的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。

怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。

经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即可。最后,代码变成如下的样子:

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象,实现图片的预下载 
img.src = url; 
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 
callback.call(img); 
return; // 直接返回,不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
};

经过这么一番折腾,总算是让各个浏览器都能满足我们的目标了。虽然代码很简单,但是却把图片浏览器中最核心的问题解决掉了,接下来你所要做的,仅仅是图片如何呈现的问题了接下来看看另外一种方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>js 实现图片预加载 加载完后执行动作</title> 
</head> 
<style type="text/css"> 
<!-- 
*html{ 
margin:0; 
padding:0; 
border:0; 
} 
body{border:1px solid #f3f3f3; background:#fefefe} 
div#loading{ 
width:950px; 
height:265px; 
line-height:265px; 
overflow:hidden; 
position:relative; 
text-align:center; 
} 
div#loading p{ 
position:static; 
+position:absolute; 
top:50%; 
vertical-align:middle; 
} 
div#loading p img{ 
position:static; 
+position:relative; 
top:-50%;left:-50%; 
vertical-align:middle 
} 
--> 
</style> 
<div id="loading"> 
<p><img src="http://www.baidu.com/img/baidu_logo.gif" /></p> 
</div> 
<script> 
var i=0; 
var c=3; 
var imgarr=new Array 
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif"; 
imgarr[1]="http://img.baidu.com/img/logo-img.gif"; 
imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif"; 
var Browser=new Object(); 
Browser.userAgent=window.navigator.userAgent.toLowerCase(); 
Browser.ie=/msie/.test(Browser.userAgent); 
Browser.Moz=/gecko/.test(Browser.userAgent); 
function SImage(url,callback) 
{ 
var img = new Image(); 
if(Browser.ie){ 
img.onreadystatechange =function(){ 
if(img.readyState=="complete"||img.readyState=="loaded"){ 
ii=i+1; 
callback(i); 
} 
} 
}else if(Browser.Moz){ 
img.onload=function(){ 
if(img.complete==true){ 
ii=i+1; 
callback(i); 
} 
} 
} 
img.src=url; 
} 
function icall(v) 
{ 
if(v<c){ 
SImage(""+imgarr[v]+"",icall); 
} 
else if(v>=c){ 
i=0; 
//location.replace('banner.html');//这里写自己的动作吧, 
} 
}
Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
javascript实用方法总结
Feb 06 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
javascript实现动态标签云
Oct 16 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Javascript根据指定下标或对象删除数组元素
Dec 21 #Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 #Javascript
js返回上一页并刷新代码整理
Dec 21 #Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 #Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 #Javascript
mailto的使用技巧分享
Dec 21 #Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 #Javascript
You might like
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php xhprof使用实例详解
2019/04/15 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
javaScript基础详解
2017/01/19 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
详解React 条件渲染
2020/07/08 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
如何利用python查找电脑文件
2018/04/27 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
浅谈Python中的模块
2020/06/10 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
家长学校工作方案
2014/05/07 职场文书
迎七一演讲稿
2014/09/12 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis