JS 获取动态加载图片的尺寸

haibao 笔记 2015-03-09 11:57 481
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共735个字,预计阅读时间需要2分钟。

获取动态加载图片的尺寸,关键在于如何判断图片是否已经加载完毕,如果在加载完成之前就执行获取尺寸(或者做点其他事)的代码,可能获取不到正确的结果。

常见的是使用jquery的load()方法来解决这个问题,该方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

1
2
3
$("#img").load(function(){
   //获取尺寸的代码
});

这种方法有些问题,jquery文档就load()方法用于图片加载时给出了几点警告(http://api.jquery.com/load-event/):

  • 1. It doesn’t work consistently nor reliably cross-browser
  • 2. It doesn’t fire correctly in WebKit if the image src is set to the same src as before
  • 3. It doesn’t correctly bubble up the DOM tree
  • 4. Can cease to fire for images that already live in the browser’s cache

有一种相对比较好的解决方案是使用javascript的Image对象,这个对象常被用来预读图片,它可以先将图片装入DOM,等需要的时候再调用。

1
2
3
4
5
6
var img = new Image();
img.onload = function(){
  var width = img.width;
  var height = img.height;
}
img.src = url;

Tips: src属性要写在onload后面,否则IE浏览器下会出错。

本文标题:JS 获取动态加载图片的尺寸

本文地址:http://www.hehaibao.com/js-get-img-size/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注