javascript图片预加载实例分析
本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考。具体如下：
lightbox类效果为了让图片居中显示而使用预加载，需要等待完全加载完毕才能显示，体验不佳（如filick相册的全屏效果）。javascript无法获取img文件头数据，真的是这样吗？本文通过一个巧妙的方法让javascript获取它。
这是大部分人使用预加载获取图片大小的例子：
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;
};
};
};
JavaScript代码：
//更新：
//05.27:1、保证回调执行顺序：error>ready>load；2、回调函数this指向img本身
//04-02:1、增加图片完全加载后的回调2、提高性能
/**
*图片头数据加载就绪事件-更快获取图片尺寸
*@version2011.05.27
*<ahref="http://my.oschina.net/arthor"class="referer"target="_blank">@author</a>TangBin
*<ahref="http://my.oschina.net/see"class="referer"target="_blank">@see</a>http://www.planeart.cn/?p=1121
*@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);
};
};
})();
调用例子：
imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png',function(){
alert('sizeready:width='+this.width+';height='+this.height);
});
希望本文所述对大家的javascript程序设计有所帮助。