那一抹温暖的阳光,是我们永恒的向往。
www.webbar.cn

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

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

1.img.onload失效

最近在做一个web项目,其中有一个需求:在服务端图片未下载完成之前显示另一个图片,下载完成后才显示此图片,所以想到了img的onload方法,开发完成后,在firefox浏览器下没有什么问题,在IE下测试,发现img的onload事件很多情况下都不被调用。

 

最初的代码如下:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script>
var obj = new Image();
obj.src = “/upload/21/01/14/1172210114.4452029.jpg”;
obj.onload = function()
{
$(“img”).attr(‘src’,this.src);

alert(this.src);
}
</script>
<div id=”mypic”><img src=”../images/loading.gif” /></div>

这段代码看上去没什么问题,但是为什么onload在ie下经常没有被调用呢?通过网上搜索找到了原因:因为浏览器会缓存图片,第2次加载的图片,不是从 服务器上传过来的,浏览器不会向服务端发送请求,而是从缓冲区里加载的。是不是从缓冲区里加载的图片就不触发onload事件呢?但alert每次都是执 行的,所以猜测是错误的,于是把代码做了一下修改

 

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script>
var obj = new Image();
obj.onload = function()
{
$(“img”).attr(‘src’,this.src);
alert(this.src);

}

obj.src = “/upload/21/01/14/1172210114.4452029.jpg”;
</script>
<div id=”mypic”><img src=”../images/loading.gif” /></div>

把onload事件写到给imgage对象的src赋值之前了,先告诉浏览器如何处理这张图片,再指定这张图片的源,这样就正常了。所以,不是IE浏览器没有触发onload事件,而是因为加载缓冲区的速度太快了,以至于没有运行到obj.onload的时候,onload事件已经触发了。

 

2.load失效

在ie中load()方法去是提取缓存的数据而不是向服务器提取

 

在script开头加上这句js , 让ie不读取缓存就好  如果只是一个方法用到load() 那就在load()之前加上这句 不需要全局设置

 

$.ajaxSetup ({ cache: false });

 

时间:2014-03-21
标签:

Comments are closed.

Search