js图片缓存即img的onload事件与complete属性之间关系

在很多情况下需要快速的显示图片到页面上。但是图片加载是需要一定时间的。

这样就需要对图片进行预加载工作。

关键是img的onload事件与complete属性。

onload是图片加载完成执行的事件，complete属性是图片显示出来以后为true。

那么在onload之前complete肯定是false的，这个毋庸置疑。那么我们就可以在onload事件内部判断complete属性是否为true。

如果为true那么代表图片真正的加载成功，否则可以重新加载。

上面是实现思路，接下来我们写一个小demo：

var l =5;
var Images = new Array(l);
var ImgLoaded =0;

//设置加载队列
function LoadImgs()
{
    for(var i=0;i<Images.length;i++){
        Images[i]=new Image();
        downloadImage(i);
    }
}

//加载单个图片文件
function downloadImage(i)
{
    var imageIndex = i+1; //图片以1开始
    Images[i].src = "images/"+imageIndex+".jpg";
    Images[i].onLoad=validateImages(i);
}

//验证是否成功加载完成，如不成功则重新加载
function validateImages(i){
    if (!Images[i].complete)
    {
        window.setTimeout('downloadImage('+i+')',200);
    }
    else if (typeof Images[i].naturalWidth != "undefined" && Images[i].naturalWidth == 0)
    {
        window.setTimeout('downloadImage('+i+')',200);
    }
    else
    {
        ImgLoaded++
        if(ImgLoaded == l)
        {
            alert('图片加载完毕！');
        }
    }
}

LoadImgs();//在目录内images文件夹下模拟1-5.jpg，或者修改地址也可以。