Jquery 你如何在Javascript中缓存图像

一旦图像以任何方式加载到浏览器中，它将在浏览器缓存中，并在下次使用时加载得更快，无论是在当前页面还是在任何其他页面中，只要在图像从浏览器缓存过期之前使用该图像.

所以，要预切图像，只需将其加载到浏览器中即可.如果你想预切一堆图片，最好用javascript来做，因为当用javascript来做的时候，它通常不会占用页面加载.你可以这样做:

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

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

This function can be called as many times as you want and each time, it will just add more images to the precache.

Once images have been preloaded like this via javascript, the browser will have them in its cache and you can just refer to the normal URLs in other places (in your web pages) and the browser will fetch that URL from its cache rather than over the network.

最终，随着时间的推移，浏览器缓存可能会填满并丢弃已有一段时间未使用的最旧内容.因此，最终会将图像从缓存中刷新出来，但它们应该会在那里停留一段时间(取决于缓存有多大以及完成了多少其他浏览).每次图像实际再次预加载或在网页中使用时，它都会自动刷新它们在浏览器缓存中的位置，这样就不太可能将它们从缓存中清除出go .

浏览器缓存是跨页面的，因此它适用于加载到浏览器中的任何页面.因此，您可以在站点中的一个位置进行预缓存，然后浏览器缓存将用于站点上的所有其他页面.

When precaching as above, the images are loaded asynchronously so they will not block the loading or display of your page. But, if your page has lots of images of its own, these precache images can compete for bandwidth or connections with the images that are displayed in your page. Normally, this isn't a noticeable issue, but on a slow connection, this precaching could slow down the loading of the main page. If it was OK for preload images to be loaded last, then you could use a version of the function that would wait to start the preloading until after all other page resources were already loaded.

function preloadImages(array, waitForOtherResources, timeout) {
    var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15*1000, timer;
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    if (!waitForOtherResources || document.readyState === 'complete') {
        loadNow();
    } else {
        window.addEventListener("load", function() {
            clearTimeout(timer);
            loadNow();
        });
        // in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
        // then preload the images anyway after some timeout time
        timer = setTimeout(loadNow, t);
    }

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

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