将图像保留在内存中会阻止该图像的缓存过期吗?

时间:2017-01-04 21:27:33

标签: javascript browser-cache

preload Image files in JavaScript的标准方法似乎是这样的:

var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
for(var i=0; i<images_to_load.length; i++){
  var img = new Image();
  img.src = images_to_load[i];
}

通过让浏览器请求图像文件,将图像加载到缓存中。但是,无法保证图像文件在缓存中保留,如cache expiration time is dependent on server settings and browser settings

如果将Image对象保留在内存中,图像是否保证保留在缓存中,直到页面关闭?以下是一个基本示例:

var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
var loaded_images = [];
for(var i=0; i<images_to_load.length; i++){
  var img = new Image();
  img.src = images_to_load[i];
  loaded_images.push(img);
}

2 个答案:

答案 0 :(得分:1)

不,没有任何保证。

JavaScript内存中的内容与浏览器在缓存中的内容完全不同。一种可能的解决方案是在缓存到期时间之前创建图像的新实例。如果重复此过程,则可以确保缓存中的图像始终可用。

答案 1 :(得分:0)

您可以使用服务工作者缓存甚至预加载图像

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

有示例代码 https://github.com/mdn/sw-test/

在此处详细了解离线优先:http://offlinefirst.org/