JS：检查隐藏图像是否仍在浏览器的缓存中？

Question

我们的网页包含基于 36 张产品图片的 360 度产品查看器。一次只显示一个图像，所有其他图像都被隐藏。所有图像都从没有缓存指令的 AWS S3 存储桶提供（应该是这样）。在第一次启动 JS 插件显示 36 图像的预加载器和 加载后一切正常。

当用户在另一个选项卡中工作时，当网络选项卡（仅在 chrome 中测试）长时间（几个小时）保持打开状态时，就会出现问题。那些隐藏的图像正在从缓存中删除，JS 脚本再次重新加载所有这些图像，360 药物看起来很奇怪（不流畅）。浏览器加载所有缺失的图像后，它会再次开始流畅地工作，并且在几个小时不活动后它会再次重复。

这种行为是我们所期望的，但我们想以某种方式检查隐藏图像是否不再缓存以调用预加载器。

我在网络和 stackoverflow 中搜索了答案，但所有其他与缓存相关的问题都没有回答我的问题，例如“检查图像是否在重新打开浏览器或缓存后被缓存”。我的问题是：如何检查隐藏图像是否仍在缓存中？

示例代码赞赏。谢谢！

PS - 我知道如何为从 S3 传递的图像启用缓存标头，这不是一个选项。

PSS - 创建 1px 图像支架也不是一种选择。

Answer 1

正如您在 cmets 中提到的 - 您不想弄乱您的预加载器代码，也不想每次都启动您的预加载器。

您的问题的答案是“不，没有 100% 跨浏览器的方式来判断图像是否在缓存中”，但是，您可以通过测量加载开始和结束之间的时间来猜测它。

因此，您可以在页面上添加一个准预加载器脚本，该脚本会尝试预加载所有隐藏的图像，并且，如果每张图像所花费的平均时间超过某个阈值（例如 100 毫秒或类似的值） - 它会启动您的主预加载器，因此您可以避免在主预加载器启动时不必要的页面阻塞/数据丢失。

只要您的所有图像都在缓存中 - 准预加载器不会占用太多资源来检查所有图像。

它应该是什么样子的一些非常“肮脏”的例子：

    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();
        }
        //...
    }