IE中Image .onload方法问题

在web开发在获取图片宽高是很正常的事情,图片在加载完成前是获取不到图片的宽高的,在加载完成后才可以获取图片本身的宽高,例如:
[code=”javascript”]
var img = new Image();
img.src = “loading.gif”;
img.onload = function(){
alert ( img.width );
};
[/code]

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

[code=”javascript”]
var img = new Image();
img.onload = function(){
alert ( img.width );
};
img.src = “loading.gif”;
[/code]

赞(0) 打赏
未经允许不得转载:WEB前端开发 » IE中Image .onload方法问题

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这个很有意思,我之前还以为img得附加到DOM才会解析src属性呢。

    dongzz8年前 (2011-05-13)回复
  2. #-48

    可以使用img.complete判断是否图片加载过,如果加载过就直接去宽高就行了

    var img = new Image();
    img.src = “loading.gif”;
    if(img.complete){
    alert ( img.width );
    }else img.onload = function(){
    alert ( img.width );
    };

    qiqiboy8年前 (2011-05-13)回复
    • 哇,学习了,谢谢

      8年前 (2011-05-13)回复
  3. #-47

    这个还会有问题,gif文件是多帧的,在ie6中会出现多次加载问题,所以要在onload里面将onload事件设为null

    断桥残雪8年前 (2011-05-14)回复
  4. #-46

    鬼哥可以看看这篇文章 http://www.planeart.cn/?p=1121

    wo_is神仙8年前 (2011-05-16)回复
    • 晕~~贴错地方了,但好像又撞对了 -_-||

      wo_is神仙8年前 (2011-05-16)回复
    • 谢谢,比我这个好多了!

      8年前 (2011-05-16)回复
    • 博客里就有用他写的代码。

      crossyou8年前 (2011-05-18)回复
  5. #-45

    哈!学习了!

    hdm588年前 (2011-05-30)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏