`
c_fanatic
  • 浏览: 66244 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

收藏:解决IE中img.onload失效的方法

阅读更多
最近在做web开发,其中有一个需求:利用Javascript获取要加载的图片的尺寸,所以很自然的,我就想到了img的onload方法,在 firefox下开发完成后,我到IE下调试,发现img的onload事件很多情况下都不被调用。

我最初的代码如下:

var img = new Image;
img.src = "test.gif";
img.onload = function(){
    alert ( img.width );
};

    这段代码看着没什么问题,但是为什么onload没有被IE调用呢?因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢?我于是我测试了以下代码,成功了~

var img = new Image;
img.onload = function(){
    alert ( img.width );
};
img.src = "test.gif";

    我把onload写到前面去,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这让我想到了Ajax,我们在写xmlhttp的时候,都是先指定onstatechange的回调函数,然后再send数据的,道理是一样的

http://www.cnitblog.com/CoffeeCat/archive/2008/02/01/39533.html
分享到:
评论

相关推荐

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

    为了解决这个问题,需要在onload事件处理程序中重新指定img.src属性。这样做的目的是为了告诉浏览器要加载的是一个新的图片资源,以此绕过缓存,从而确保onload事件能够被触发。 以上就是从给定文件信息中提取的...

    ie中 body onload 和 window onload 解决法案

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

    img的onload的另类用法

    img标签的onload事件是我们在前端开发中经常使用的一种事件,主要用于判断图片是否加载完成。然而,onload事件不仅仅局限于图片的加载完成,还有许多其他的用法。今天,我们就来探索img的onload事件的另类用法。 ...

    js 弹窗 http://hi.baidu.com/18201670151/home

    在描述中,“js弹窗记录cookie完全突破IE 谷歌 firefox 等主流浏览器”提到了几个关键点: 1. **Cookie记录**:Cookie是Web服务器在用户的浏览器上存储的小型文本文件,用于存储用户的相关信息,如登录状态、购物车...

    脱离document.onload和window.onload的onload事件

    脱离document.onload和window.onload的onload事件,可多次添加加载事件!

    jquery.loadImage.1.0 绑定图片加载完成事件

    基于jquery开发的一个小插件,主要作用是绑定图片(img标签)的onload事件,如果是纯JavaScript开发,可借鉴下面的代码: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if ...

    实现ie6的png图片透明的2种方法

    本文将详细介绍两种在IE6中实现PNG图片透明的方法:一种针对`<img>`标签,另一种则应用于CSS背景图。 #### 方法一:针对`<img>`标签 这种方法主要是通过JavaScript来解决PNG图片的透明度问题。具体实现思路如下: ...

    window.onload

    在网页开发过程中,`window.onload` 和 `insertAfter()` 方法是两个非常实用且重要的技术点。它们可以帮助开发者更好地控制页面加载流程以及动态地操作DOM(文档对象模型)。本文将深入探讨这两个方法的基本原理、...

    Titanium中Httpclient访问REST 服务

    在`onload`回调中,我们可以解析这些数据,并根据业务逻辑进行处理。例如,如果是JSON,可以使用`JSON.parse(responseData)`将其转换为JavaScript对象。 在实际开发中,我们可能还需要处理更复杂的情况,比如设置...

    img onload事件绑定各浏览器均可执行

    这种方法确保了在所有支持的浏览器中,`img.onload`事件都能正确绑定并触发。需要注意的是,这种技巧可能会导致图片短暂地消失然后再出现,因为它需要重新加载图片。在实际应用中,可能需要考虑优化用户体验,比如...

    仅img元素创建后不添加到文档中会执行onload事件的解决方法

    然而,在某些情况下,即使没有将`img`元素添加到文档流中,`onload`事件也会被触发。这个问题可能对开发者造成困扰,因为它可能导致预期之外的行为。下面我们将详细探讨这个问题以及如何解决。 首先,我们要理解为...

    解决ie6 PNG透明问题——两种方法都好用哦

    ### 解决IE6 PNG透明问题的方法 在网页设计与开发领域中,Internet Explorer 6(简称 IE6)因其对部分CSS特性和图像处理的支持不足而成为不少开发者头疼的问题之一,尤其是PNG透明效果的支持。本文将详细介绍两种...

    img.readyState!= complete 权限问题 也是一个无用题

    例如,我们可以使用`img.naturalWidth`和`img.naturalHeight`来获取图像的实际尺寸,或者在`img.onload`事件中计算`img.width`和`img.height`以获取渲染后的尺寸。这样,即使在图片加载过程中遇到问题,也能通过这些...

    浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

    方法一:在标签上加入 onLoad=”” onResize=”” 方法 写上对应的方法即可方法二:[removed]=function(){///…..} 在方法里面写上对应的代码即可着两种方法基本都可以解决你的问题了 代码如下: [removed]=...

    IE11没有window.attachEvent方法处理方法

    ### IE11没有window.attachEvent方法处理方法 在Web开发过程中,我们经常需要处理各种浏览器兼容性问题。其中,Internet Explorer(简称IE)一直是开发者关注的重点之一,尤其是IE10及以下版本。随着技术的发展,IE...

    jquery.imgGetSize:在图片onload之前获取图片的大小

    image-size使用该插件,可以在图片onload之前获取图片的大小,在瀑布流布局中,应该可能会有用处。###实现原理:使用轮询,在图片onload之前,获取到图片大小。如果图片已经被缓存过,直接返回相关信息。回调参数...

    下载google上的recaptcha,api.js

    下载文件 https://www.google.com/recaptcha/api.js 和这个文件中包含的另外一个文件 https://www.gstatic.com/recaptcha/api2/r20160531110558/recaptcha__zh_cn.js

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

    然而,在Internet Explorer(IE)浏览器中,`onload`事件对于图片的处理有时会出现问题,尤其是在图片已经存在于浏览器缓存中的情况下。这个问题在描述中已经得到了体现,即在某些情况下,IE浏览器不会触发图片的`...

Global site tag (gtag.js) - Google Analytics