检查图像是否从缓存加载

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）后，您将能够确定是否已从缓存加载图像。

Answer 2

使用香草JS

const image = document.querySelector('.my-image-class');

if (image.complete) {
  image.addEventListener('load', () => {
    // Do stuff when image wasn't loaded from cache
  });
} else {
  // Do stuff when image has been loaded trough cache
}

当不再需要事件监听器时，请不要忘记删除它。