IE中Image对象onload失效问题

来源:互联网 发布:ppt画网络拓扑图 编辑:程序博客网 时间:2024/05/21 08:02
最近做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会检测缓冲区是否已经有此图片,有的话直接就触发此事件!
原创粉丝点击