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

 更新时间:2014年06月06日 11:33:23   作者:  
这篇文章主要介绍了IE中图片的onload事件无效问题和解决方法,这是一个很经典的问题,其实只需要调换一下代码顺序即可解决,需要的朋友可以参考下

在web开发在获取图片宽高是很正常的事情,图片在加载完成前是获取不到图片的宽高的,在加载完成后才可以获取图片本身的宽高,例如:

复制代码 代码如下:

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

OK?这段代码看着没什么问题,但在ie中会有一个bug,就是ie第一次打开的时候没问题,第二次使用这个方法就悲剧了,ie没反应了,即使刷新页面也是一样。因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的。
先写onload方法,再指定这张图片的URL,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这样就OK了。

复制代码 代码如下:

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

相关文章

  • JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)

    JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)

    下面小编就为大家带来一篇JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js电话号码验证方法

    js电话号码验证方法

    JS电话号码验证是比较常的一种验证,下边给出一个JavaScript验证电话号码的小例子。国内固定电话都是七位或8位的数字组成的,还可以带有长途的区号。
    2015-09-09
  • js制作简易计算器

    js制作简易计算器

    这篇文章主要为大家详细介绍了js制作简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Swiper.js实现移动端元素左右滑动

    Swiper.js实现移动端元素左右滑动

    这篇文章主要为大家详细介绍了Swiper.js实现移动端元素左右滑动 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 极简主义法编写JavaScript类

    极简主义法编写JavaScript类

    荷兰程序员Gabor de Mooij提出了一种比Object.create()更好的新方法,他称这种方法为"极简主义法"(minimalist approach)。下面通过本文给大家分享极简主义法编写JavaScript类的相关知识,一起看看吧
    2017-11-11
  • 绝对经典的滑轮新闻显示(javascript+css)实现

    绝对经典的滑轮新闻显示(javascript+css)实现

    这篇文章主要介绍了绝对经典的滑轮新闻显示(javascript+css)实现,需要的朋友可以参考下
    2007-03-03
  • 详谈js中window.location.search的用法和作用

    详谈js中window.location.search的用法和作用

    下面小编就为大家带来一篇详谈js中window.location.search的用法和作用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 11个教程中不常被提及的JavaScript小技巧(推荐)

    11个教程中不常被提及的JavaScript小技巧(推荐)

    这篇文章主要介绍了11个教程中不常被提及的JavaScript小技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript 精确获取页面元素的位置

    javascript 精确获取页面元素的位置

    现在网上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法,累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层。
    2010-01-01
  • javascript简单判断输入内容是否合法的方法

    javascript简单判断输入内容是否合法的方法

    这篇文章主要介绍了javascript简单判断输入内容是否合法的方法,以验证用户名是否为数字与字母组成为例,分析了javascript正则验证的思路与实现方法,需要的朋友可以参考下
    2016-05-05

最新评论