关于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还是暂时保留。