JS获取图片宽高的步骤

一、简陋的获取图片的方式

var img_url = 'img_url'

var img = new Image();

img.src = img_url;

alert('width:'+img.width+',height:'+img.height);

 这时alert的宽高都为0,因为图片没有被加载出来时它就已经执行了这个函数。

所以我们该在onload后再alert。

二、onload后提示

var img_url = 'img_url'

var img = new Image();

img.src = img_url;

img.onload = function(){
	alert('width:'+img.width+',height:'+img.height);
};

 通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢，但只要图片被浏览器缓存，那么图片加载几乎就不用等待即可触发onload，所以有些人通过缓存获取也可以这么写。

三、complete与onload一起使用

var img_url = 'img_url';

var img = new Image();

img.src = img_url;

// 判断是否有缓存
if(img.complete){
        alert('from:complete : width:'+img.width+',height:'+img.height);
}else{
	img.onload = function(){
		alert('from:onload : width:'+img.width+',height:'+img.height);
	};
}

 第一次执行比较慢，再刷新，就都是缓存触发了。