解决IE中img.onload失效的方法

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>
最近在做web开发,其中有一个需求:利用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数据的,道理是一样的




本文转自 netcorner 博客园博客,原文链接: http://www.cnblogs.com/netcorner/archive/2010/07/14/2911995.html   ,如需转载请自行联系原作者
相关文章
在masm32中获取IE版本的方法2
在masm32中获取IE版本的方法2
在masm32中获取并显示IE版本的方法1
在masm32中获取并显示IE版本的方法1
|
Web App开发
clearTimeout 方法在IE上的兼容问题
clearTimeout 方法在IE上的兼容问题
74 0
|
JavaScript 前端开发
关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题
关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题
92 0
关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题
|
Windows
Windows 技术篇-安装指定版本Internet Explorer浏览器方法,IE浏览器的升级和降级
Windows 技术篇-安装指定版本Internet Explorer浏览器方法,IE浏览器的升级和降级
424 0
Windows 技术篇-安装指定版本Internet Explorer浏览器方法,IE浏览器的升级和降级
|
Windows
Windows 技术篇-Internet Explorer浏览器启用方法,windows找不到ie浏览器解决办法
Windows 技术篇-Internet Explorer浏览器启用方法,windows找不到ie浏览器解决办法
165 0
Windows 技术篇-Internet Explorer浏览器启用方法,windows找不到ie浏览器解决办法