JS快速获取图片宽高的方法(一)

html+css cooljun 323℃ 0评论

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

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址