CoffeeCat's IT Blog

解决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

posted on 2008-02-01 13:46 CoffeeCat 阅读(9597) 评论(11)  编辑 收藏 引用

评论

# re: 解决IE中img.onload失效的方法 2008-04-18 13:31 macnie

谢谢。写的很详细。很有收获。我正在为此问题而困扰。  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2008-05-15 17:21 extra

感谢你,困挠我很长时间了,网上也找不到一个清晰的答案,谢谢,太感谢了!  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2008-07-21 21:34 wonca

不错~谢谢楼主  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2008-12-19 17:01 asp

谢谢  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2009-05-13 17:47 kdepp

太感谢了,正解啊~  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2009-08-04 12:39

你都直接分src赋值了,还要onload 干嘛,onload的作用就是等图片加载完才执行函数里的操作   回复  更多评论   

# re: 解决IE中img.onload失效的方法 2009-08-05 10:37 CoffeeCat

@梁
给src赋值以后,图片不会立即显示出来的,它需要加载,如果赋的是远程的地址,它还需要先下载。因此肯定会有一个加载图片的过程。而且赋值src的操作是不阻塞的,所以当然需要响应onload,否则你是无法知道什么时候图片已经加载完成了。  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2009-08-13 16:56 Devil

如何使用啊 <img onload="aaa()" />  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2011-08-28 19:09 cloud

Thank you very much,this is just what i need  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2012-01-09 10:10 jiaxun

好文,正好解决了困扰我很久的问题,谢谢楼主  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2012-08-24 11:06 水中月明

很感谢  回复  更多评论   

# re: 解决IE中img.onload失效的方法 2012-09-20 15:25 lovefishs

好文,正好解决了困扰我很久的问题,谢谢楼主  回复  更多评论   

只有注册用户登录后才能发表评论。
<2007年10月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

导航

统计

公告

常用链接

留言簿(203)

随笔档案

收藏夹

搜索

最新评论

阅读排行榜

评论排行榜