快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比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快速获取图片宽高的方法(一)