IE浏览器中Image对象onload失效的解决办法

作为WEB设计者,为了在网页展示上加强用户体验,经常会利用图象载入显示状态方法,这自然需要Image对象的onload事件。 在firefox浏览器下完成开发后,可是在IE浏览器中进行调试总不能被调用。不管是最新版的IE8还是旧版本的IE7IE6都无效,最初的代码简化后如下:

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浏览器会检测缓冲区是否已经有此图片,有的话直接就触发此事件!

文章来自:http://www.iefans.net/ie-image-duixiang-onload/

时间: 2024-10-07 10:08:17

IE浏览器中Image对象onload失效的解决办法的相关文章

安装wampserver之后,浏览器中输入localhost页面显示IIS7解决办法

1.首先保证wamp正常启动 wampserver图标为绿色才为正常启动,如果为橘色说明端口(默认为80)被占用:可以点击图标,然后点Apache->Service->测试80端口,来验证端口是否被占用. 如果占用则去Apache中的配置文件httpd.conf中去修改端口,ctrl+F搜索Listen,将Listen的值改为8080. 2.重启wamp,图标变绿色,将离线状态切换成在线状态 3.正确输入地址 在火狐浏览器中输入localhost:8080

浏览器禁用Cookie,基于Cookie的会话跟踪机制失效的解决办法

当浏览器禁用Cookies时,基于Cookie的会话跟踪机制就会失效,解决办法是利用URL重写机制跟踪用户会话. 在使用URL重写机制的时候需要注意,为了保证会话跟踪的正确性,所有的链接和重定向语句中的URL都需要调用encodeURL()或encodeRedirectURL()方法进行编码.另外,由于附加在URL中的SessionID是动态产生的,对于每一个用户都是不同的,所欲对于静态页面的相互跳转,URL重写机制就无能为力了,但是,我们也可以通过将静态页面转换为动态页面来解决这个问题. 在w

[转]iOS Safari 中click点击事件失效的解决办法

iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 

iOS Safari 中click点击事件失效的解决办法

问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 <a> 或者 button 等可点击的?元素 ?将 cl

jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

vue中router-link的click事件失效的解决办法

title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue 使用@click.native 问题原因: router-link会阻止click事件 .native指直接监听一个原生事件 原文地址:https://www.cnblogs.com/zmj97/p/10180674.html

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline

在ASP.net中的UpdatePanel,弹窗失败解决办法

原文:在ASP.net中的UpdatePanel,弹窗失败解决办法 最开始我用: Response.Write("<script>alert('和哈呵呵呵呵呵呵!')</script>"); 在没有UpdatePanel时,这个有效,能够正确弹出提示窗口. 后面,页面改进,加上局部刷新后,该方式失效了.探索出新的方式: ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(),&q

前端问题——png图片在IE6下透明失效,解决办法

今天,一位同事问我问题,png 图片在IE6下透明背景失效. 解决办法,在网上查了很多,最后还是采用两种方案来解决这个问题 1.把这个网页的png格式图片变更为gif格式的图片.问题解决 2.就是让这个网页引用一段JS代码,如下: 1 if (!window.XMLHttpRequest) { 2 window.attachEvent("onload", enableAlphaImages); 3 } 4 5 function enableAlphaImages(){ 6 for (v