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

作者: haibao 分类: 笔记 发布时间: 2015-03-09 11:57
年青人求知欲很旺,而忍耐性不足。 ——郭沫若

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

常见的是使用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 获取动态加载图片的尺寸],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>