JS中通过url动态获取图片大小的方法小结(两种方法)
很多时候再项目中，我们往往需要先获取图片的大小再加载图片，但是某些特定场景，如用过cocos2d-js的人都知道，在它那里只能按比例缩放大小，是无法设置指定大小的图片的，这就是cocos2d-js的坑了，我们必须先获取图片大小，计算比例再对图片进行缩放。
查阅资料，我总结了两种通过url获取图片大小的方法：
1.预加载获取图片大小
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;
};
};
};
此方法必须等待图片加载完毕才能获取尺寸，速度超慢，图片会先出现原本大小，一段时间后才进行缩放，体验差
2.封装的方法imgReady
varimgReady=(function(){
varlist=[],intervalId=null,
//用来执行队列
tick=function(){
vari=0;
for(;i1024){
//如果图片已经在其他地方加载可使用面积检测
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);
});
方法二体验下好很多，速度也很快，建议使用。
总结
以上所述是小编给大家介绍的JS中通过url动态获取图片大小的方法小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！