JavaScript Image 对象如何与浏览器缓存交互？

Question

我正在使用简单的对象来包装 Image 对象并跟踪它们何时加载，如下所示：

var preloader = {
    loaded: false,
    image: new Image()
}
preloader.image.onload = function() {
    preloader.loaded = true;
}
preloader.image.src = 'http://www.example.com/image.jpg';

图像加载完成后，preloader.loaded 设置为 true。一切正常。

我的问题是，当我有这么多这些对象和这么多图像以致浏览器缓存用完时会发生什么。最终，一旦加载了足够多的图像，浏览器就会开始将旧的图像从缓存中转储出来。在那种情况下，我最终不会得到loaded=true 的JavaScript 对象，但实际上不再缓存图像文件了吗？

这很难测试，因为在任何给定点我都无法分辨哪些图像仍在缓存中，哪些不在。

Answer 1

一旦您从网页加载了图像，就不会从缓存中使用它。它实际上在浏览器页面生命周期内或直到你摆脱这个 JS 对象以便它可以被垃圾收集。

缓存不用于存储页面上加载的图像。使用缓存以便下次请求加载此图像时，可以更快地加载它。如果您加载的图像过多以至于超出了缓存的存储空间，那么您已经加载的图像将不会发生任何事情，因为它们在页面期间（独立于缓存）在浏览器内存中。将会发生的是，您加载的某些图像将不再在缓存中，因此下次某些浏览器页面想要加载它们时，它们将不在缓存中，并且必须从其原始网站中获取通过互联网。

Answer 2

昨天我删除了过去几个月积累的 800MB 互联网缓存。简而言之，我认为不可能耗尽浏览器缓存，除非用户拥有一台非常旧的机器，或者您预加载了太多图像。