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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
js字符编码函数区别分析
Jun 05 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php at(@)符号的用法简介
2009/07/11 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
javascript的几种写法总结
2016/09/30 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue组件中的数据传递方法
2018/05/14 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Python常见文件操作的函数示例代码
2011/11/15 Python
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python制作CSDN免积分下载器
2015/03/10 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python框架flask表单实现详解
2019/11/04 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
使用Python构造hive insert语句说明
2020/06/06 Python
opencv 阈值分割的具体使用
2020/07/08 Python
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
公司授权委托书格式样本
2014/10/01 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
南京导游词
2015/02/03 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
趣味运动会口号
2015/12/24 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
Python字典的基础操作
2021/11/01 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技