javascript图片预加载完整实例
本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>图片预加载</title>
</head>
<body>
<imgid="song"width="300"src="http://www.baidu.com/img/bdlogo.gif"_src="http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif"/>
</body>
</html>
<scripttype="text/javascript">
//默认图片
vardefurl='http://www.baidu.com/img/bdlogo.gif';
//一张大尺寸图片
varimgurl='http://www.planeart.cn/demo/imgReady/vistas24.jpg';
//一张gif图片
vargifurl='http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif';
//图片预加载
functionloadImage(url,callback){
varimg=newImage();//创建一个Image对象，实现图片的预下载
img.onload=function(){
img.onload=null;//gif图片在ie下会循环请求
callback(img);
}
img.src=url;
}
varimg=document.getElementById('song');
varurl=img.getAttribute('_src')
loadImage(gifurl,function(){
//alert('ok');
img.src=url;
})
/**
*网络上通用的图片预加载函数
*@paramurl
*@paramcallback
*/
varimgLoad=function(url,callback){
varimg=newImage();
img.src=url;
if(img.complete){
callback(img.width,img.height);
}else{
img.onload=function(){
callback(img.width,img.height);
img.onload=null;
};
};
};
//更新：
//05.27:1、保证回调执行顺序：error>ready>load；2、回调函数this指向img本身
//04-02:1、增加图片完全加载后的回调2、提高性能
/**
*图片头数据加载就绪事件-更快获取图片尺寸
*
*原理：没有缓存的情况下，用计时器不断验证图片的大小是否发生变化，如果不在变化则为ready
*如果有缓存则w3c浏览器会调用complete，ie则会走onload，都不在走计时器那部分
*
*@version2011.05.27
*@authorTangBin
*@param{String}图片路径
*@param{Function}尺寸就绪
*@param{Function}加载完毕(可选)
*@param{Function}加载错误(可选)
*@exampleimgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png',function(){
alert('sizeready:width='+this.width+';height='+this.height);
});
*/
varimgReady=(function(){
varlist=[],intervalId=null,
//用来执行队列
tick=function(){
vari=0;
for(;i<list.length;i++){
list[i].end?list.splice(i--,1):list[i]();
}
;
!list.length&&stop();
},
//停止所有定时器队列
stop=function(){
clearInterval(intervalId);
intervalId=null;
};
returnfunction(url,ready,load,error){
varonready,width,height,newWidth,newHeight,
img=newImage();
img.src=url;
//如果图片被缓存，则直接返回缓存数据
if(img.complete){
ready.call(img);
load&&load.call(img);
return;
}
;
width=img.width;
height=img.height;
//加载错误后的事件
img.onerror=function(){
error&&error.call(img);
onready.end=true;
img=img.onload=img.onerror=null;
};
//图片尺寸就绪
onready=function(){
newWidth=img.width;
newHeight=img.height;
if(newWidth!==width||newHeight!==height||
//如果图片已经在其他地方加载可使用面积检测
newWidth*newHeight>1024
){
ready.call(img);
onready.end=true;
}
;
};
onready();
//完全加载完毕的事件
img.onload=function(){
//onload在定时器时间差范围内可能比onready快
//这里进行检查并保证onready优先执行
!onready.end&&onready();
load&&load.call(img);
//IEgif动画会循环执行onload，置空onload即可
img=img.onload=img.onerror=null;
};
//加入队列中定期执行
if(!onready.end){
list.push(onready);
//无论何时只允许出现一个定时器，减少浏览器性能损耗
if(intervalId===null)intervalId=setInterval(tick,40);
}
;
};
})();
varimg_url='http://www.planeart.cn/demo/imgReady/vistas24.jpg';
imgReady(img_url,function(){
//console.info(this.width);
//console.info(this.height);
alert(this.width+'\n'+this.height);
document.getElementById('song').src=img_url;
})
</script>
希望本文所述对大家JavaScript程序设计有所帮助。