如何给图片做缓存

在大型网页中，我们会遇到一张大图片需要被下载下来，但是要考虑到图片下载下来的时间会阻塞其他资源的下载，为了有效得控制住图片所占用的网络资源，可以使用javascript方式来解决这个问题，大概代码是这样的：

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = preloadImages.list.indexOf(this);
            if (index !== -1) {
                // remove this one from the array once it's loaded
                // for memory consumption reasons
                preloadImages.splice(index, 1);
            }
        }
        preloadImages.list.push(img);
        img.src = array[i];
    }
}

preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);

我们可以看得出来，这是对需要加载的图片进行预加载，但是这样就能够缓存图片吗，不是的，这只是给图片进行预加载，并不能算是缓存图片，当图片加载到网页中的时候，浏览器会对这些资源进行缓存，在第二次加载的时候不会重新请求服务器，它会预先加载缓存的文件