javascript - JS : check if hidden image is still in browser's cache?

Question

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

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

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

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

赞赏示例代码。谢谢!

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

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

Answer 1

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

您的问题的答案是“不，没有 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();
        }
        //...
    }