MyException - 我的异常网
当前位置:我的异常网» 图形/图像 » IE浏览器中Image对象onload失效的解决方法

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

www.MyException.Cn  网友分享于:2013-02-20  浏览:25次
IE浏览器中Image对象onload失效的解决办法

写了段代码:

function test(){
 x = new Image(); //当图像装载完毕时调用的事件句柄。
 x.src = "1.jpg";
 x.onload = function(){
 alert(/success/);
}

 x.onerror = function(){
  alert(/error/);
}

}
test();
alert("test");

当时,就是无法弹窗,问题出在x.src的位置上
来源:不详

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

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有