Question

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

当用户在其他标签页中工作时，网页标签（仅在Chrome中测试）会长时间（几个小时）保持打开状态时出现问题。那些隐藏的图像正从缓存中删除，JS脚本再次重新加载所有这些图像，360药物看起来很奇怪（不顺畅）。浏览器加载所有缺席的图像后，它会再次开始平稳运行，经过几个小时的不活动后，它会再次重复。

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

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

示例代码表示赞赏。谢谢！

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

PSS - 创建1px图像持有者也不是一种选择。

Answer 1

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

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

因此，您可以在页面上添加准预加载器脚本，尝试预加载所有隐藏的图像，并且，如果每个图像的平均时间超过某个阈值（例如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();
        }
        //...
    }

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

1 个答案: