img.onload在IE下有问题

类别: 前端开发 — 标签: , , , — honk @ 2009-06-03 16:52:17

今天在写一个图片播放器时,发现IE缓存图片后,img.onload事件无法触发。
找到一解决方案,转载以备忘:

最近在做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数据的,道理是一样的。

Ferris
2008-2-1

原文链接:http://www.cnitblog.com/CoffeeCat/archive/2009/05/13/39533.html
Thanks to CoffeeCat

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered By WordPress and soIdo