javascript - 检查图像是否从缓存中加载

Question

我有一个任务。我有一个服务器调用来获取图像列表。除了其他信息外，我还必须添加此信息以表明它是从缓存还是从服务器加载的。

有没有一种方法可以检查 api 调用中的 header ？如果它来自缓存，我会得到状态代码 200，但我会得到像这样的额外信息(来自缓存)。如果它不是来自缓存，我只会得到状态码 200。

图片 1 是那些没有从缓存中加载的

下一张图片是从缓存中加载的。

我知道答案已经给出或者是重复的。我已经尝试过该解决方案，但它似乎不起作用。它也是特定于 chrome 的，我正在寻找应该适用于所有浏览器的更通用的东西。我希望这可以解释为什么我没有采用该解决方案。我在这里问之前已经搜索过了。

期待回复。

Answer 1

您必须有选择地处理您的加载绑定(bind)。您可以通过测试 Image 对象属性 complete 来验证负载。

例如:

$('.images_to_load').each(function(index, elem)
{
    if (!elem.complete) {
        $(elem).on('load', function(){
            console.log('image loaded from server');
        });
    }
    else {
        console.log('image loaded from cache');
    }
});

如何使用此代码:执行上述代码时，页面上的图像标签(不带 src 属性)与 images_to_load 类很重要。添加 src 属性(url)后，您将能够确定图像是否已从缓存中加载。