IE中Image.onload失效的问题

我是在做图片剪切时遇到的兼容性问题


最近在做wBox开发中,需要做一个图片的幻灯片效果,为了方便加载速度,我使用了new Iamge的对象方法来预加载图片,当图片onLoad就运行一个函数来计算图片的大小尺寸,进行jQuery动画,以及切换图片src,在firefox下开发完成后,可是到了IE下进行调试总是不会触发onload事件,不管是IE8、IE7还是万恶的IE6,都不会触发onload事件,我很迷惑,后来在google上找到了解决的方法:一下为引用部分


最初的代码如下:

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数据的,道理是一样的。
------------>
imgObj.οnlοad='func...'为定义imgObj对象的加载完成后所触发的函数
(可以将更换IMG标签的SRC属性的代码放入该函数中)
定义onload事件之后,对imgObj对象的SRC赋值--即令对象imgObj开始加载

============>
imgObj.onload = function(){function1();function2();}
推荐用以上形式,在某测试中发现:
imgObj.onload = function1();这种形式在图片加载完成前便执行了function1方法
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值