图片预加载之比onload更快的获取图片尺寸
一般获取图片大小的方法
var imgload = function(url,callback){
var img = new Image();
img.src = url;
if(img.complete){
callback(img.width,img.height)
}else{
img.onload = function(){
callback(img.width,img.height);
img.onload = null;
};
}
}
imgload('http://pal4.baiyou100.com/pal4index_files/pic/pic_d_20.jpg',function(a,b){
document.title="图片宽度"+a+"高度"+b;
})
以上代码必须等待图片加载完成才能获取图片尺寸。
以下前辈的代码通过javascript定时侦测图片的尺寸状态就可以知道图片尺寸是否加载完成，可以在图片加载完成前获取图片大小。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <script type="text/javascript"> var imgReady = (function () { var list = [], intervalId = null, // 用来执行队列 tick = function () { var i = 0; for (; i < list.length; i++) { list[i].end ? list.splice(i--, 1) : list[i](); }; !list.length && stop(); }, // 停止所有定时器队列 stop = function () { clearInterval(intervalId); intervalId = null; }; return function (url, ready, load, error) { var onready, width, height, newWidth, newHeight, img = new Image(); 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); // IE gif动画会循环执行onload，置空onload即可 img = img.onload = img.onerror = null; }; // 加入队列中定期执行 if (!onready.end) { list.push(onready); // 无论何时只允许出现一个定时器，减少浏览器性能损耗 if (intervalId === null) intervalId = setInterval(tick, 40); }; }; })(); //测试代码 var url = 'http://pal4.baiyou100.com/pal4index_files/pic/pic_d_20.jpg?'+new Date()*1; //不缓存的图片地址 imgReady(url,function(){ document.body.innerHTML='图片尺寸加载完毕，宽度为'+this.width+'高度为'+this.height; },function(){ document.body.appendChild(this); },function(){ 图片加载失败 }) </script> </body> </html>
经过测试发现确实快了很多！
对于 newWidth * newHeight > 1024 主要针对WebKit 浏览器一开始就已经被撑开了 目前测试的浏览器不会有此问题 此条完全没必要了
关于前辈的定时器有装逼之嫌，不过还是有学习的价值！
下面是另一位前辈写的
