【转】解决大量图片造成的页面延迟

当页面上存在大量图片的时候，图片下载可能造成页面延迟。下面介绍一种解决这种问题的方法：

function regImg(e,src){
    if(!window.imgHash) window.imgHash = new Object();
    var a = imgHash[src];
    e.onerror=null;
    if(a==null) {
        e.style.display="none";
        a=imgHash[src]=[];
        a[0]=new Image();
        a[1]=e;
        a[0].onload=function(){setImges(a)};
        a[0].src=src;
    }else{
        if(a[0].readyState=="complete")
            e.src=src;
        else{
            e.style.display="none";
            a[a.length]=e;
        }
    }
}

function setImges(a){
    for(var i=1;i<a.length;i++){
        a[i].src=a[0].src;
        a[i].style.display="";
    }
    a.length=1;
    a[0].onload=null;
}

用法举例：

<img src="about:blank" onerror="regImg(this,'http://photo8.yupoo.com/20070625/121507_1495531449_m.jpg');" />

程序分析：

1、页面加载的时候，页面上的图片地址都是空白页面地址，那么也就是图片加载会出错，这时候就会以JS方式调用regImg来加载和显示图片。
2、首先，建立一个imgHash页面hash对象。
3、如果要加载的图片已经存在在imgHash对象里面，如果存在直接调用显示，如果还未加载完成，就将该位置的图片显示排队。
4、如果要加载的图片在imgHash对象里面不存在，创建Image对象并加载src地址的图片，并将该图片的信息设置到imgHash对象。
5、当src地址的图片加载完成，就将该图片地址全部是该src的显示队列全部显示出该图片。
6、由于该程序使用了页面hash对象缓存图片对象，所以该程序不但解决了图片下载可能造成页面延迟问题，还可以避免重复加载图片。建议在发现图片下载造成页面延迟的情形下使用。