IE浏览器中Image对象onload失效的解决办法
2017-09-25 17:56
411 查看
IE浏览器中Image对象onload失效的解决办法
前言:作为WEB设计者,为了在网页展示上加强用户体验,经常会利用图象载入显示状态方法,
这自然需要Image对象的onload事件。
在firefox浏览器下完成开发后,可是在IE浏览器中进行调试总不能被调用。
不管是最新版的IE8还是旧版本的IE7和IE6都无效,最初的代码简化后如下:
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";
测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。
所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办
时,它已经加载完了。
反过来说,firefox明显更智能一些,加入onload事件后,firefox浏览器会检测缓冲区是否已经有此图片,
有的话直接就触发此事件!
前言:作为WEB设计者,为了在网页展示上加强用户体验,经常会利用图象载入显示状态方法,
这自然需要Image对象的onload事件。
在firefox浏览器下完成开发后,可是在IE浏览器中进行调试总不能被调用。
不管是最新版的IE8还是旧版本的IE7和IE6都无效,最初的代码简化后如下:
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";
测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。
所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办
时,它已经加载完了。
反过来说,firefox明显更智能一些,加入onload事件后,firefox浏览器会检测缓冲区是否已经有此图片,
有的话直接就触发此事件!
相关文章推荐
- IE浏览器中Image对象onload失效的解决办法
- IE浏览器中Image对象onload失效的解决办法
- IE浏览器中Image对象onload失效的解决办法
- IE8浏览器中Image对象onload失效的解决办法
- IE浏览器中Image对象onload失效的…
- IE浏览器JS提示缺少对象的解决办法
- 关于spring使用new对象时注解失效问题解决办法
- ie中按钮onclick等事件失效。提示提示对象不支持此操作。在谷歌浏览器中又能使用解决办法
- jquery通过插入方法向html中插入对象,对象的hover失效解决办法
- IE浏览器下jquery的ajax方法失效解决办法
- 关于IE中image的onload事件失效解决问题
- 关于IE中image的onload事件失效解决问题
- IE中Image对象onload失效问题
- Delphi XE2快捷键(Ctrl+Shift+C\Ctrl+Shift+上下键)失效解决办法。
- linux共享动态库中同名对象重复析构-两次析构或多次析构引起的double free解决办法
- js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)
- ListView的OnItemClickListener失效的解决办法
- Eclipse自动提示功能失效(ctrl + /)解决办法
- 自定义IE浏览器渲染方式(解决IE10 js或插件失效)
- ButterKnife失效的解决办法