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。一切正常。

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

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

Answer 1

从网页加载图像后，它不会从缓存中使用。它实际上是在浏览器页面内存中持续浏览器页面的生命周期，或直到你摆脱这个JS对象，因此它可以被垃圾收集。

缓存不用于存储页面上加载的图像。使用缓存以便下次请求加载此图像时，可以更快地加载它。如果加载的图像超出了缓存的存储空间，则在页面持续时间内，您已加载的图像不会发生在浏览器内存中（与缓存无关）。会发生的情况是，您加载的某些图像将不再存在于缓存中，因此下次某些浏览器页面需要加载它们时，它们将不会位于缓存中并且必须从其原始网站获取通过互联网。

Answer 2

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