我和我的 friend 正在一个网站上工作，我们希望缓存某些图像以便将来更快地显示它们。我有两个主要问题:

1. 如何缓存图像？
2. 图像缓存后如何使用？ (并且只是为了验证，如果图像缓存在页面 A 上，则可以从缓存中调用它以在页面 B 上使用它，对吗？)

此外，是否可以设置图像的缓存版本何时过期？

如果包含一个示例和/或指向对此进行进一步描述的页面的链接，我们将不胜感激。

我们可以使用原始 Javascript 或 jQuery 版本。

最佳答案

一旦图像以任何方式加载到浏览器中，它就会在浏览器缓存中，下次使用它时加载速度会更快，无论是在当前页面还是在任何其他页面，只要图像在浏览器缓存中过期之前被使用。

因此，要预缓存图像，您所要做的就是将它们加载到浏览器中。如果你想预缓存一堆图像，最好用 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"]);

此函数可以根据需要调用多次，每次都会将更多图像添加到预缓存中。

一旦通过 javascript 像这样预加载图像，浏览器就会将它们保存在缓存中，您只需在其他地方(在您的网页中)引用普通 URL，浏览器就会从其缓存中获取该 URL，而不是而不是通过网络。

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

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

如上预缓存时，图像是异步加载的，因此它们不会阻塞页面的加载或显示。但是，如果您的页面有很多自己的图像，这些预缓存图像可能会与页面中显示的图像竞争带宽或连接。通常，这不是一个明显的问题，但在连接速度较慢的情况下，这种预缓存可能会减慢主页的加载速度。如果预加载图像可以最后加载，那么您可以使用该函数的一个版本，它会等到所有其他页面资源都已加载后才开始预加载。

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);

关于javascript - 你如何在 Javascript 中缓存图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10240110/