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);
}
答案 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/