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

Question

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

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

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

我在网络和 Whosebug 上搜索了答案，但所有其他与缓存相关的问题都没有回答我的问题，例如 "check if image is cached after reopening browser or cache"。我的问题是：如何检查隐藏图像是否仍在缓存中？

感谢示例代码。谢谢！

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

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

Answer 1

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

您的问题的答案是 "no, there is no 100% crossbrowser way to tell if image is in the cache"，但是，您可以通过测量加载开始和结束之间的时间来猜测它。

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

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

一些非常 "dirty" 的示例应该是什么样子：

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

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

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

javascript

amazon-s3

browser-cache

amazon-web-services