JS:检查隐藏的图片是否还在浏览器的缓存中？
我们的网页包含一个360角度的产品查看器，基于36个产品图像。一次只显示一个图像，所有其他图像都被隐藏。所有图像都是从亚马逊网络服务的S3存储桶中提供的，没有缓存指令(这就是它应该的方式)。在第一次启动时，JS插件显示了36张图片的预加载器，加载后一切都很完美。
当用户在另一个选项卡中工作时，web选项卡(仅在chrome中测试)长时间(几个小时)保持打开时，问题就来了。这些隐藏的图像正在从缓存中删除，JS脚本再次重新加载所有这些图像，360药物看起来很奇怪(不平滑)。在浏览器加载了所有缺失的图像后，它又开始平稳地工作，在几个小时的不活动之后，它再次重复。
这是我们所期望的行为，但我们希望以某种方式检查隐藏的图像是否不再缓存以调用预加载器。
我搜索了网页和stackoverflow来寻找答案，但所有其他与缓存相关的问题都没有回答我的问题，比如“重新打开浏览器或缓存后检查图像是否被缓存”。我的问题是:如何检查隐藏的图像是否仍在缓存中？
感谢示例代码。谢谢!
PS -I知道如何为从S3传送的图像启用缓存头，但这不是一个选项。
PSS -创建1px的图像持有者也不是一个选项。
回答 1
Stack Overflow用户
发布于 2016-08-25 14:36:49
正如你在评论中提到的-你不想弄乱你的预加载器代码，也不想每次都启动你的预加载器。
你的问题的答案是“不，没有100%跨浏览器的方法来判断图像是否在缓存中”，然而，你可以通过测量加载开始和结束之间的时间来猜测它。
所以，你可以在页面上添加一个准预加载器脚本，尝试预加载所有隐藏的图像，如果平均花费的时间超过了某个阈值(比如100ms或类似的值)，它就会启动你的主预加载程序，这样你就可以在主预加载程序启动时避免不必要的页面阻塞/数据丢失。
只要你的所有图像都在缓存中，准预加载器就不会占用太多的资源来检查所有的图像。
一些关于它应该是什么样子的非常“脏”的例子：
window.needsPreloadingFlag=false;
window.onfocus = function () {
if (!window.needsPreloadingFlag) {
needsPreloadingFlag = quasiPreloader.checkHiddenImages();
}
};
yourApp.onUserActionThatProbablyNeedsPreloading = function (){
//that should be bound to events that require your hidden images
if (window.needsPreloadingFlag) {
yourApp.preloadImages();
}
//...
}https://stackoverflow.com/questions/38907464
复制相似问题
腾讯云开发者
