图片预加载之预先加载1-相册

       当一个页面中有多组图片时，往往会称为影响性能的关关键因素。我们不可能同时把所有的图片都加载完才开始浏览页面，估计那样的活一个用户都没了。正如可以缓存电视剧一样，如果我们可以缓存图片就soeasy了，由此引出今天的话题“图片预加载”。

       我们经常会用下载软件（例如迅雷）下载电视剧，一个电视剧可以有N集，下载电视剧的时候我们一般都是先下载第一集，下载完成以后，在看第一集的时候同时去下载后面的内容。这样我可以在看前面的内容的时候把后面的也下完，节约了时间还达到了我们看电视剧的目的。同理，在js中，在页面打开的时候，我们去加载第一张图片，页面加载完成后，在用户浏览的同时去加载别的内容，这时我们就需要一个类似迅雷的下载工具实现类似的缓存图片的功能。我们找到了Image对象，它就是我们的迅雷工具。下面以相册的例子来说明利用Image对象实现图片预先加载的功能。

html部分如下：

<img src="http://pic15.nipic.com/20110630/6322714_105943746342_2.jpg" id="img1" width="300"/>

js部分如下：

window.onload = function(){
    var oImg = document.getElementById("img1");
    var oImage = new Image();

    // 缓存图片的数组
    var arr = [
         'http://pic15.nipic.com/20110704/6322714_014024934312_2.jpg',
         'http://pic15.nipic.com/20110703/6322714_103035354389_2.jpg',
        'http://pic25.photophoto.cn/20121216/0010023993176540_b.jpg',
        'http://pic.35pic.com/normal/09/39/48/4499633_231014028354_2.jpg',
        'http://pic17.nipic.com/20111113/8762972_102134664000_2.jpg',
        'http://pic34.photophoto.cn/20150304/0012025410133141_b.jpg',
        'http://tupian.enterdesk.com/2013/xll/009/02/2/12.jpg'
    ];

    // 当前图片的索引
    var iCur = 0;

    // 用户要看哪一张
    var i = 0;

    xunlei();

    // 点击图片时
    oImg.onclick = function(){
        i++;
        if(i < arr.length){
            oImg.src = arr[i];
        }
    }

    // 迅雷下载（当用户再看图片时，加载缓存其他图片）
    function xunlei(){
        oImage.src = arr[iCur];
        oImage.onload = function(){
            // 下完一张后，要接着下载下一张
            iCur++;
            // 当iCur小于数组长度时，说明还有图片没加载，这时再调用xunlei缓存图片
            if(iCur < arr.length){
                xunlei(); //递归调用
            }
            document.title = iCur + '/' + arr.length;
        }
    }
}