关于img的onload事件兼容ie下的bug问题

们都知道onload事件是在img加载完成后触发的事件,但是ie下这个onload事件并没有想像中的灵,特别是在ie7/ie6下,网上的解释是ie因为缓存关系造成的img.onload
件没有被激发,因为ie这个东西喜欢异步,所以由缓存的问题,网页获取到图片的时间极短(应该比代码解释的时间快)所以造成了onload事件被错过了。
网上一般的说法是把onload事件写在src赋值之前可以解决这个onload事件不被触发的问题,但是,实际上如果对于多图片来说,这个方法其实不太
灵。即把下面代码:

var image = new Image();
image.src = "xxx.jpg";
image.onload = function() {
    document.getElementById("img").src = image.src;
}

改成

var image = new Image();
image.onload = function() {
    document.getElementById("img").src = image.src;
}
image.src = "xxx.jpg";

实际证明,这样子改可以改善部分情况,但是不是万试万灵的。特别是在做多图片异步加载时,这个onload事件不被触发的可能性太高了。于是在网上又看了一堆资料,发现image有一个叫complete属性,这个属性表示图片是否已经加载完成了,如果加载完成为true,未完成为false,有了这个属性就可以写一个定时检查方法,从而堵上ie的这个bug。以下是我写的一段代码:

obj.find(".proBox > .image > a > img").each(function() {
    //遍历图片,检查是否需要加载图片
    if ($(this).attr("status") == "unload" || $(this).attr("status") == "") { //未加载的图片
        var realSrc = $(this).attr("real");
        var target = this; //建立一个可以给image.onload函数调用的对象
        var image = new Image();
        image.onload = function complete() { //加载完成
            $(target).attr("status", "loaded"); //加载完成
        }
        function check() { //ie7下显示bug的修复
            if (image.complete) {
                complete();
            } else {
                setTimeout(function() {
                    check();
                },
                500); //每隔0.5秒检查一次
            }
        }
        if (document.all) {
            check();
        }
        image.src = realSrc;
        $(target).attr("status", "loading"); //加载中
    }
});

为了让图片的真实路径在网页加载完成后再异步加载,所以有很多图片都要用到onload事件,但是在不加check()方法前,ie7下总是有几个图片没办法显示出来,但是加上我现在写的check方法。网页显示正常了。
不过,我突然间由ie的js这么喜欢异步的问题想到,其实不用img.complete属性也是可以在ie下正常触发img.onload
件的,就利用ie最喜欢的异步方式,我只要推后解决onload事件就可以了,即把image.src=”xxx.jpg”用setTimoute推迟
0.1-0.5秒就可以了,这样子ie就可以先解释到onload事件,再去请求图片了,就不怕因为缓存问题造成图片显示不全了,于是代码修改如下:

dobj.find(".proBox > .image > a > img").each(function() {
    //遍历图片,检查是否需要加载图片
    if ($(this).attr("status") == "unload" || $(this).attr("status") == "") { //未加载的图片
        var realSrc = $(this).attr("real");
        var target = this; //建立一个可以给image.onload函数调用的对象
        var image = new Image();
        image.onload = function complete() { //加载完成
            $(target).attr("status", "loaded"); //加载完成
        }
        /*function check(){//ie7下显示bug的修复
     if(image.complete){
      complete();
     }else{
      setTimeout(function(){check();},500);//每隔0.5秒检查一次
     }
    }
    if(document.all){check();}*/
        setTimeout(function() {
            image.src = realSrc;
        },
        300);
        $(target).attr("status", "loading"); //加载中
    }
});

实验证明,我的猜想是正确的。不过,原来的complete还是暂时保留。

时间: 2024-11-05 03:42:57

关于img的onload事件兼容ie下的bug问题的相关文章

<img/>标签onerror事件在IE下的bug和解决方法

IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框.经分析,这个bug是由于img标签的onerror事件引起的.程序中用到的代码片段如下:正常情况下显示src所指路径的图片,加载失败时显示通过img标签的onerror事件显示另一张图片,问题就出现在了这里,当另一张图片也不存在时,就造成了循环触发onerror事件,在IE下就会弹出“stack overflow”的弹框. <img src="http://img1.soufunimg.com/agent

浏览器返回按钮不会触发onLoad事件

最近在做一个移动端项目,发现移动端某些返回和PC端是有差异的, 比如ios中返回按钮是直接使用缓存的, 不会执行任何js代码, 这个问题很蛋疼, 例如, 在提交的时候将按钮设置为loading状态, 如果在提交成功后没有对安装进行处理, 那么返回后按钮依然是loading状态, 这种体验很差, 如下图: 此问题是由于某些浏览器在back的时候是直接使用的之前的视图,页面没有进行重新加载而导致的,在网上找了些资料, 发现这是H5的一些新特性Back-Forward Cache(简称bfcache)

jQuery的document ready与 onload事件——你真的思考过吗?

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo

一些web事件兼容(根据高级程序)

var EventUtil = { //事件监听 addHandler: function( element, type, handler ) { if ( element.addEventListener ) { element.addEventListener(type, handler, false); } else if ( element.attachEvent ) { element.attachEvent("on" + type, handler); } else { e

利用 onload 事件监控跨站资源

用过 CSP 的都很郁闷,上报的只有违规的站点名,却没有具体路径.这是缺陷,还是特意的设计? 显然,CSP 是为安全定制的,里面的规范自然要严格制定,否则就会带来新的安全问题.如果支持详细路径的上报,那又会引出什么问题? 由于 CSP 会上报所有的请求,甚至包括重定向的,因此可以用来探测重定向后的地址.假如已登录的用户访问 login.xx.com 会重定向到 xx.com/username,那么攻击者设计一个只允许重定向前的规则的页面,用户访问后,重定向后的 URL 就会当做违规地址上报给攻击

window/body/img/iframe 的onload事件

在html页面中,只有body,img,iframe这一类标签具有onload事件. onload事件表示在当前元素载入完成后发生的事件.其中,window也有onload事件,但是跟body的是同一事件,如果页面上对两者都定义了该事件,只会响应一个. iframe上的事件在ie6下有一些bug: 1.iframe的onload事件跟window.onload事件只能二者取其一,似乎ie把它看作同一个事件了!例如: window.onload=function(){ alert("window

jQuery $(document).ready()和JavaScript onload事件

对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/javascript"> document.getElementById("panel").onclick = fu

js之onload事件的一点使用心得

刚看到这篇文章,我也犯晕,实际的原因其实是函数赋值时多了个(),这标明是一个表达式,所以会直接执行函数,小小一个(),奥妙真不小. js之onload事件的一点使用心得 window.load和window.onload的意思并不只是页面加载完就执行,那要看你怎么用了,下面做了示例为大家介绍下,感兴趣的朋友可以参考下 如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”. 但是答案是不一定,得看你怎么用.看一下例子吧 例1: 代

onload事件-----addLoadEvent函数

在给网页加一些特效时经常要在<body>中加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!')”,但这样做有个大的缺陷,事件会在网页完全下载完后才会执行,包括网页中的图片或Flash等,如果网页中的图片比较大或有很多图,可能还没等网页完全下载完网友已经点击链接到其它网页去了,这样这个事件就没有执行了.另外在某些特殊情况下可能还修改不了网页的body参数.如在别人网站发表文章时,或用CMS整站系统时. 这时我们会想到用“win