你如何缓存Javascript中的图像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

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

  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);
用户回答回答于

因为@Pointy表示你不用JavaScript缓存图片,浏览器会这样做。所以这可能是你要求的,可能不是......但你可以使用JavaScript预载图像。通过将所有要预加载的图像放入数组中,并将该数组中的所有图像放入隐藏的img元素中,可以有效地预加载(或缓存)图像。

var images = [
'/path/to/image1.png',
'/path/to/image2.png'
];

$(images).each(function() {
var image = $('<img />').attr('src', this);
});

扫码关注云+社区