`

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

分享到:
评论

相关推荐

    js的image onload事件使用遇到的问题

    1. 事件处理程序的绑定时机:在早期的IE浏览器中,如果在设置Image对象的src属性之前绑定onload事件处理程序,可能会导致事件不被触发。在现代浏览器中,这种情况得到解决,但在较旧版本的IE中,为了兼容性考虑,...

    ie中 body onload 和 window onload 解决法案

    在网页开发中,`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数,用于在页面完全加载后执行特定的代码。它们都是用来确保在执行任何操作之前,页面的所有资源(包括HTML、CSS、JavaScript、...

    IE浏览器中图片onload事件无效的解决方法

    本文主要讨论的是在IE浏览器中遇到的一个特定问题,即图片的`onload`事件在某些情况下无法正常触发,导致图片加载状态的控制出现问题。 首先,我们要理解`onload`事件的作用。`onload`是HTML DOM(文档对象模型)中...

    JavaScript与Image加载事件(onload)、加载状态(complete)

    在网页开发中,我们经常需要动态加载图片,这时就需要利用到Image对象的加载事件(onload)和加载状态(complete)属性。这两个特性可以帮助我们实时监控图片的加载进度,从而实现更灵活的交互效果。 首先,`onload...

    IE中图片的onload事件无效问题和解决方法

    总结来说,IE浏览器中的图片`onload`事件无效问题主要是由于浏览器的图片缓存机制导致的。为了避免这个问题,开发人员应确保在设置`onload`事件处理函数后再指定图片的`src`属性。这样可以确保事件处理函数总是在...

    js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    在IE浏览器中,图片是否被显示出来决定着complete属性的值,而在其他浏览器中,如果图片之前已经被加载过并被缓存,那么complete属性值会是true。 总结来说,通过JavaScript实现图片预加载的关键点包括正确使用...

    为非IE浏览器添加mouseenter,mouseleave事件

    在现代Web开发中,Internet Explorer(IE)浏览器的市场份额逐渐减少,而其他非IE浏览器如Chrome、Firefox、Safari和Edge等变得越来越流行。这些浏览器支持许多先进的Web标准,但它们之间的API和事件处理可能存在...

    IE8中动态创建script标签onload无效的解决方法

    本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。 代码如下: 代码如下:var...

    IE浏览器去掉FLASH虚线框的两种方法

    标题 "IE浏览器去掉FLASH虚线框的两种方法" 涉及的是在使用Internet Explorer(IE)浏览含有Flash内容的网页时,如何消除Flash对象周围的虚线边框的问题。这通常是一个视觉上的优化,因为虚线边框可能会影响网页的...

    IE浏览器去掉FLASH虚线框的两种方法.rar

    在IE浏览器中,用户在与Flash内容交互时,有时会看到一个烦人的虚线边框环绕在Flash对象周围。这个虚线边框是IE浏览器为了突出显示可点击或可交互区域而设计的,默认情况下,当鼠标悬停在Flash上时,它会出现。这在...

    IE iframe的onload方法分析小结

    本文将深入探讨IE浏览器中`<iframe>`的`onload`事件处理,以及如何有效地判断一个`<iframe>`是否已经加载完成。 在非IE浏览器(如Firefox、Chrome等)中,我们可以直接使用`<iframe>`的`onload`事件进行绑定,例如...

    文档模式与IE浏览器模式

    ### 文档模式与IE浏览器模式 #### 一、引言 随着Web技术的不断发展与变化,不同的浏览器在处理HTML和CSS的方式上存在着细微差异。为了兼容各种基于不同标准开发的网站,微软在Internet Explorer 8及之后的版本中...

    JQuery-- onload,ready方法详细解说

    JQuery onload、ready 方法详细解说 在 JavaScript 库中,JQuery 提供了两种事件处理机制,即 onload 和 ready。它们都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。 首先,我们需要了解这两种事件...

    ie 处理 gif动画 的onload 事件的一个 bug

    IE浏览器在处理GIF动画的onload...该bug是IE浏览器在处理GIF动画的onload事件时存在的一个bug,可以通过在onload事件函数中,将onload事件设置为null来解决。同时,静态GIF、JPG、BMP等其他格式的图片不会出现这个bug。

    js中Image对象以及对其预加载处理示例

    现在,让我们深入探讨JavaScript中Image对象的使用方法以及如何高效地进行图片预加载处理。 首先,Image对象可以被创建为一个新的实例,这样就可以在不显示于HTML文档中时预读图片。创建方式很简单,可以使用var...

    js 利用image对象实现图片的预加载提高访问速度

    为了解决这个问题,可以采用“图像预装载”(image preloading)的技术,即在用户真正需要图片之前,就将图片提前加载到浏览器的缓存中。这样,当用户访问到相应页面时,浏览器可以从缓存中迅速恢复图片,从而显著...

Global site tag (gtag.js) - Google Analytics