js中onload时获取图片高度宽度的方法

发布时间:2020-03-29编辑:脚本学堂
js获取图片高度宽度的方法,在onload加载页面时获取图片的尺寸信息,获取图片的宽度与高度,兼容ie与chrome等浏览器。

JS获取图片高度宽度

一般获取图片高度宽度的写法
 

var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);
 

但chrome中测试 无法获取到。img.width, img.height都为0

原因:
当图片不是本地图片,而是网络图片

onload 在成功地装载了图像时调用的事件处理程序。

需求:
利用javascript获取要加载的图片的尺寸,想到了img的onload方法,在firefox下开发完成后,到ie下调试,发现img的onload事件很多情况下都不被调用。

例子:
 

复制代码 代码示例:
var img = new Image;
img.src = "test.gif";
img.onload = function(){
alert ( img.width );
};
 

onload没有被IE调用
因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的。
是不是从缓冲区里加载的图片就不触发onload事件?

测试以下代码成功:
 

复制代码 代码示例:
var img = new Image;
img.onload = function(){
alert ( img.width );     };
img.src = "test.gif";
 

把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。

因此,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。
这让想到了Ajax,在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的。