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

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>
最近在做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数据的,道理是一样的




本文转自 netcorner 博客园博客,原文链接: http://www.cnblogs.com/netcorner/archive/2010/07/14/2911995.html   ,如需转载请自行联系原作者
相关文章
jq判断图片加载错误就使用另一个图片
jq判断图片加载错误就使用另一个图片
element-plus:el-upload上传文件只能一次,第二次失效
element-plus:el-upload上传文件只能一次,第二次失效
388 0
|
JavaScript
利用onerror 事件处理img标签中的src图片加载失败
利用onerror 事件处理img标签中的src图片加载失败
173 0
window.onload不能正常执行
window.onload不能正常执行
100 0
|
前端开发
前端面试题:1.页面加载完成(onload)之前触发的事件;2.History,Location,Window,Navigation的区别;3.e.target和e.currentTarget的区别
★Navagator:提供有关浏览器的信息 ★Window: Window对象处于对象层次的最顶层, 它提供了处理Navagator窗口的方法和属性 ★Location:提供了与当前打开的URL-工作的方 法和属性,是一个静态的对象 ★History:提供了与历史清单有关的信息 ★Document:包含与文档元素一起工作的对象,它将这些元素封装起来供编程人员使用
221 0
|
JavaScript
Element UI - el-image 图片初始化加载爬坑
Element UI - el-image 图片初始化加载爬坑
1930 0
Element UI - el-image 图片初始化加载爬坑
|
小程序
小程序wx.navigateTo()失效
小程序wx.navigateTo()失效
97 0
小程序wx.navigateTo()失效
ADI
|
缓存 前端开发 Android开发
[记录] window.location对象实现页面刷新
[记录] window.location对象实现页面刷新
ADI
333 0
|
缓存 JavaScript 前端开发
img的complete和onload
HTML DOM complete 属性 定义和用法: complete 属性可返回浏览器是否已完成对图像的加载。 如果加载完成,则返回 true,否则返回 fasle。 语法: imageObject.complete   Image onload 事件 定义和用法: onload 事件在图片加载完成后立即执行。
7350 0