当前位置:

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

本文最后更新于2015-03-09,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共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浏览器下会出错。

版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句