如何检查图像是否缓存在js中？ [复制]答案

【问题标题】：how to check if an image was cached in js? [duplicate]如何检查图像是否缓存在js中？ [复制]
【发布时间】：2013-03-12 03:31:34
【问题描述】：

当我参加面试时，我被问到这个问题，我不知道如何回答。

你知道问题的重点吗？

【问题讨论】：

标签： javascript image browser-cache

【解决方案1】：

检查Image对象的complete属性是否为true：

function is_cached(src) {
    var image = new Image();
    image.src = src;

    return image.complete;
}

它似乎可以工作（尽管如果它不在缓存中，它会加载图像，这可能不是你想要的）：

> is_cached('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3')
false
> is_cached('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3')
true

【讨论】：

@JaredFarrish - 我假设您正在寻找的措辞是“这些测试用例通过了”。对我来说，“它似乎有效”意味着他没有竭尽全力研究这个问题，而不是比问题所保证的更深入。
这不会检查缓存。它检查 DOM，您可以通过打开两个选项卡来验证这一点，在一个选项卡中“检查”（假）在同一个选项卡中再次“检查”（真）然后转到第二个选项卡并“检查”（假），即使它应该被缓存。
我发现即使在同一个选项卡中操作，这个解决方案也并不总是有效
如果您将图像源重新分配给空字符串，图像将不会继续加载。 stackoverflow.com/a/50111407/336929

【解决方案2】：

你可以像这样检查：

function is_cached(img_url){
    var imgEle = document.createElement("img");
    imgEle.src = img_url;
    return imgEle.complete || (imgEle.width+imgEle.height) > 0;
}

//and check, returns true or false depending on cached or not
is_cached("http://www.somesite.com/some_image.jpg");

【讨论】：