`
c_fanatic
  • 浏览: 67516 次
  • 性别: 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浏览器中图片onload事件无效的解决方法

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

    在IE流览器中正确显示PNG透明图片

    标题中的“在IE流览器中正确显示PNG透明图片”是指在Internet Explorer(IE)浏览器中解决PNG图像透明度无法正确显示的问题。PNG是一种支持透明度的图像格式,它允许图像具有半透明或完全透明的区域,使得图像可以...

    js使用小技巧

    <body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"> 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert...

    js图片上传前预览功能(兼容所有浏览器)

    在现代浏览器中,如Chrome、Firefox以及IE10及以上版本,我们可以直接使用`FileReader`对象的`readAsDataURL`方法来读取文件,并在读取完成后,使用`onload`事件处理函数中的`evt.target.result`来获取到文件的数据...

    网页中的图片的处理方法与代码

    <img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350) this.width=screen.width-350"> ``` 这段代码会确保图片宽度不超过屏幕宽度减去350像素。 3. **禁止IE6自动缩小大图**: ...

    CSS设置未知大小图片在已知大小容器水平垂直居中

    在网页设计中,将未知大小的图片水平垂直居中放置在一个已知大小的容器内是一个常见的需求。这个任务可以通过使用CSS(Cascading Style Sheets)来实现,确保在各种浏览器上都能得到一致的效果。以下是一种有效的...

Global site tag (gtag.js) - Google Analytics