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

最新推荐文章于 2024-07-05 16:37:04 发布

HelloStarnger

最新推荐文章于 2024-07-05 16:37:04 发布

阅读量3k

点赞数

分类专栏： js/jauery 文章标签： ie 浏览器 function image 服务器 firefox

本文链接：https://blog.csdn.net/f438952359/article/details/7476170

版权

js/jauery 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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 });