检查图像是否从缓存加载

Question

我有一个任务.我有一个服务器调用来获取图像列表.除了其他信息,我还要添加这些天气从缓存或服务器加载的信息.

有没有办法可以检查api调用中的标题？如果它是来自缓存,我得到状态代码200,但我得到这样的额外信息(来自缓存).如果它不是来自缓存我只获得状态代码200.

图像1用于未从高速缓存加载的那些

下一个图像用于从缓存加载的图像.

我已经得到了答案已经给出或者它是重复的.我尝试过这个解决方案,似乎没有用.它也是特定于chrome的,我正在寻找一些应该适用于所有浏览器的更通用的东西.我希望这能解释为什么我没有采用那种解决方案.我在问这里之前已经搜过了它.

期待回应.

Answer 1

您必须有选择地处理负载绑定。您可以通过测试 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');
    }
});

如何使用此代码：images_to_load在执行上述代码时，您的页面上必须具有带有类的图像标签（没有 src 属性），这一点很重要。添加 src 属性（url）后，您将能够确定图像是否已从缓存加载。