IE中Image对象onload失效问题
2008-07-21 22:27
239 查看
最近做WEB开发,一个图片浏览模块。为加强用户体验,我想采用图象载入显示状态方法,效果会比较好,这自然得用上Image对象的onload事件。
为了方便,我都是在FireFox上调试网页的。很好,没问题,一切正常!不过,当我把它转到IE下时却发现img的onload事件很多情况下都不被调用,结果图片显示不出来!
我最初的代码简化后如下:
我变花样来检测,IE根本不会理会,不过,偶尔还是会出现一两下子!
上网,查资料……
时间++
当时间==好大时
总算明白了,原理如下:
图片下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。
那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?
测试……
OK,测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。
所以,不是IE不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。
反过来说,FF明显更智能一些,加入onload事件后,FF会检测缓冲区是否已经有此图片,有的话直接就触发此事件!
为了方便,我都是在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会检测缓冲区是否已经有此图片,有的话直接就触发此事件!
相关文章推荐
- 关于IE中image的onload事件失效解决问题
- 关于IE中image的onload事件失效解决问题
- IE9中X-UA-Compatible失效的问题与值: 对象为 null 或未定义
- IE浏览器中Image对象onload失效的解决办法
- IE浏览器中Image对象onload失效的…
- <a>标签内嵌<input type="image">在IE中链接失效问题
- IE浏览器中Image对象onload失效的解决办法
- IE浏览器中Image对象onload失效的解决办法
- IE中Image .onload的问题
- IE8浏览器中Image对象onload失效的解决办法
- IE浏览器中Image对象onload失效的解决办法
- jquery 在 ie 8 360中 有对象不支持的问题
- IE下iframe跨域session和cookie失效问题的解决方案
- 关于IE下z-index失效的问题
- IE下iframe跨域session和cookie失效问题的解决方案
- js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
- 使用Image对象的问题
- IE6/7/8兼容问题、时间对象返回NAN
- ie7下z-index失效问题解决方法(详细分析)
- 解决EWEBEDITOR老版本在IE新版本下按钮失效问题一劳永逸的办法