javascript如何获取图片的高度

快乐打工仔 分类:实例代码

本章节介绍一下如何获取图片的真是高度,通常都是采用如下方式:

var img = new Image();
img.src = url;  
img.width;

但是上面的代码往往会不能够正确获取结果,因为图片需要加载完毕以后才能获取尺寸,当图片没有加载完成那自然不行。

这个时候我们就想到了onload事件,代码如下:

var img = new Image;
img.src = "test.gif";
img.onload = function(){
  console.log(img.width);
};

上面的代码在大多数浏览器中都能够实现功能,但是并不完美。

在IE9以下的浏览器中,只能够执行一次,如果再刷新页面就不会再输出宽度。

这是因为IE9以下浏览器会把图片缓存起来,当再次读取的时候是直接从缓存取图片,由于速度太快,当还没有执行到img.onload = function()的时候图片已经加载完成,自然也就不会触发此事件了。代码修改如下:

var img = new Image;
img.onload = function(){
  console.log(img.width);
};
img.src = "zhannei.png";

只要调换一下代码的顺序就可以顺利达成我们的目标了。

回复

我来回复
  • 暂无回复内容