快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onload方法要节省很多时间，甚至一分钟以上都有可能，并且这种方法适用主流浏览器包括IE低版本浏览器。
我们一步一步进入这个过程。
一、简陋的获取图片方式
|
1
2
3
4
5
6
7
8
9
10
11
|
// 图片地址 后面加时间戳是为了避免缓存
varimg_url =’http://www.qttc.net/static/upload/2013/13643608813441.jpg?‘+Date.parse(newDate());
// 创建对象
varimg =newImage();
// 改变图片的src
img.src = img_url;
// 打印
alert(‘width:’+img.width+’,height:’+img.height);
|
执行：
宽高都是0的这个结果很正常，因为图片的相关数据都没有被加载前它的宽高默认就是0
于是可以这么优化！
二、onload后在打印
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 图片地址 后面加时间戳是为了避免缓存
varimg_url =’http://www.qttc.net/static/upload/2013/13643608813441.jpg?‘+Date.parse(newDate());
// 创建对象
varimg =newImage();
// 改变图片的src
img.src = img_url;
// 加载完成执行
img.onload =function(){
// 打印
alert(‘width:’+img.width+’,height:’+img.height);
};
|
执行：
通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢，不实用，但只要图片被浏览器缓存，那么图片加载几乎就不用等待即可触发onload，我们要的是占位符。所以有些人通过缓存获取也可以这么写。
转载请注明：cooljun小窝 » JS快速获取图片宽高的方法（一）
如果你觉得这篇文章对你有帮助，请支持我继续更新网站 ！捐赠本站
