IE中Image对象onload失效问题

最近做WEB开发,一个图片浏览模块。为加强用户体验,我想采用图象载入显示状态方法,效果会比较好,这自然得用上Image对象的onload事件。
为了方便,我都是在FireFox上调试网页的。很好,没问题,一切正常!不过,当我把它转到IE下时却发现img的onload事件很多情况下都不被调用,结果图片显示不出来!
我最初的代码简化后如下:
var img = new Image();
img.src = "test.gif";
img.onload = function(){
    alert(this.src);
    //other       
}; 
呵呵,这代码貌似没什么问题吧,可是IE就是不认帐!!气死我了!
我变花样来检测,IE根本不会理会,不过,偶尔还是会出现一两下子!
上网,查资料……
时间++
当时间==好大时
总算明白了,原理如下:
图片下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。
那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?
测试……
var img = new Image();
img.onload = function(){
    alert(this.src);
    //other     
};
img.src = "test.gif"; 

OK,测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。
所以,不是IE不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。
反过来说,FF明显更智能一些,加入onload事件后,FF会检测缓冲区是否已经有此图片,有的话直接就触发此事件!
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值