检查图像是否从缓存中加载答案

【问题标题】：Check if the image is loaded from cache or not检查图像是否从缓存中加载
【发布时间】：2016-01-05 17:23:37
【问题描述】：

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

有没有办法可以检查 api 调用中的标头？如果它来自缓存，我会得到状态代码 200，但我会得到这样的额外信息（来自缓存）。如果不是来自缓存，我只会得到状态码 200。

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

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

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

期待回复。

【问题讨论】：

Using image.complete to find if image is cached on chrome?的可能重复

标签： javascript jquery caching

【解决方案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）后，您将能够找出图像是否已从缓存中加载。

【讨论】：

使用.complete 不是必须的吗？只需等待 onload 事件，这些天将是$(elem).on('load', function {});。甚至在这里$(this).on()。
@Shikkediel 你能在这里详细说明一下吗？也许是代码spinet或JSFiddle？
@Shikkediel 问题是load() 在某些浏览器中从缓存中提取图像时并不总是触发。
jsfiddle.net/xr3ya79w/1 动态添加 src 正在工作。有没有办法使用 src 属性？
我喜欢它，适用于所有主要的 Windows 浏览器，不知道为什么不能在 Mac 上运行。应该得到更多的支持。

【解决方案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
}

不要忘记在不再需要事件侦听器时删除它。

【讨论】：