JS实现图片预加载

最近一直在弄H5的页面，因为是宣传页面，需要加很多动画效果，做了几期，由于设计的原因不少页面元素都直接切成了图片，但是在首次加载的时候，需要加载的资源多，导致页面很慢，有些图片还没加载完，动画就已经执行完了，弄的用户体验很糟糕。

这几天有空闲时间，就想着优化一下，先加载些图片，让用户一开始的时候等待一些时间，用以提高后续的体验。

参考了网上的很多方法，代码如下：

function preload(arr) {
    var newimages = [];
    for (var i = 0; i < arr.length; i++) {
        newimages[i] = new Image();
        newimages[i].src = arr[i];
    }
}

var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
preload(imgs);

图片预加载最常用的方法就是 new 一个 Image 对象，然后将该对象的 src 属性设置为要加载的URL路径，这就实现了图片的预加载。

那怎么判断图片是否真的加载完了呢，可以监听 image 的 onload 事件和 onerror 事件，无论图片加载成功还是失败，都会在这两个事件中调用，我们可以简单的用这个来计数，再判断下和传入的数组长度是否一致。

上面是最简单的预加载图片的方法，下面的稍微修改了下：

function preload(arr) {
    var newimages = [], loadedimages = 0;
    var postaction = function(){};
    var arr = (typeof arr != "object") ? [arr] : arr;

    function imageloadpost() {
        loadedimages++;
        if (loadedimages == arr.length) {
            //alert("图片已经加载完成");
            postaction(newimages);
        }
    }

    for (var i = 0; i < arr.length; i++) {
        newimages[i] = new Image();
        newimages[i].src = arr[i];
        newimages[i].onload = function() {
            imageloadpost();
        }
        newimages[i].onerror = function() {
            imageloadpost();
        }
    }

    return {
        done: function(f) {
            postaction = f || postaction;
        }
    }
}

var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
preload(imgs).done(function(images) {
    console.log(images.length);
});

上面的那段代码中其实还返回了一个回调函数，用于处理在图片全部预加载完成后的操作。一开始也家了个判断，保证传入的数据都是数组形式。