使用 image.complete 来查找图像是否缓存在 chrome 上？答案

【问题标题】：Using image.complete to find if image is cached on chrome?使用 image.complete 来查找图像是否缓存在 chrome 上？
【发布时间】：2011-12-12 07:10:16
【问题描述】：

我一直在尝试找出外部图像是否用js缓存在浏览器上，这是我到目前为止的代码：

<html>
    <head></head>
    <body>

    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

    <script>

        function cached( url ) {
            $("#imgx").attr({"src":url});
            if(document.getElementById("imgx").complete) {
                return true;
            } else {
                if( document.getElementById("imgx").width > 0 ) return true;
            }

            return false;
        }

    </script>

    <img id="imgx" src=""  />

    <script>

        $(document).ready(function(){
            alert(cached("http://www.google.com/images/srpr/nav_logo80.png"));
        });

    </script>

    </body>
</html>

它在 firefox 上完美运行，但在 chrome 上总是返回 false。

有人知道如何让它与 chrome 一起工作吗？

【问题讨论】：

资产是否被缓存为什么重要？ ://
W3C 标准没有任何此类 API，因此您可能会使用一些特定于浏览器的 hack，这不是一件好事
此外，即使图像被缓存，加载图像仍然很可能是异步的，浏览器不太可能在执行下一行 JavaScript 之前完成图像的加载和显示。
相关stackoverflow.com/questions/1977871/…

标签： javascript jquery image cross-browser image-caching

【解决方案1】：

我已经用纯 JavaScript 重写了您的代码，使其更加独立于 jQuery。核心功能没有改变。 小提琴：http://jsfiddle.net/EmjQG/2/

function cached(url){
    var test = document.createElement("img");
    test.src = url;
    return test.complete || test.width+test.height > 0;
}
var base_url = "http://www.google.com/images/srpr/nav_logo80.png"
alert("Expected: true or false\n" +
      cached(base_url)
      + "\n\nExpected: false (cache-busting enabled)\n" +
      cached(base_url + "?" + new Date().getTime()));
//false = not cached, true = cached

我第一次收到false and false。再次运行代码后，我得到true and false。

^{使用 .complete 和 .height + .width 可以得到预期的结果（FF 3.6.23，Chromium 14）。

您很可能在 Chrome 浏览器中禁用了缓存。如果没有，请检查您提供的图像的HTTP headers（Cache-control 是否存在？）。此标头存在于 Google 示例中

如果您想检测图像何时（未）完成加载，请查看this question。}

【讨论】：

我已启用缓存并且缓存控制不存在。我想知道是否知道图像是立即加载（从缓存中）还是逐步加载。我发布的代码在 FF 上运行良好，但在 chrome 上无法运行。
@user979390 我已经包含了一个工作测试用例。见jsfiddle.net/EmjQG/2。
这是否也在 chrome 上返回“true - false”？对我来说，它总是在 chrome 上返回 false - false，我想最好的跨浏览器解决方案是设置一个计数器来计时图像加载。
@user979390 它返回false, false，然后返回true, false（Chromium 14）。观察开发者控制台的网络功能，确认图片已缓存。
嗯...说了这么多，由于某种原因，我目前无法在 Chromium 或 Firefox 中使用它。在 Firefox 中，它总是返回 false，而在 Chromium 上，它总是在新选项卡中第一次加载时返回 false——即使我可以在网络选项卡中清楚地看到响应是从缓存中提供的而没有重新验证——然后返回 true。这个答案似乎不再起作用了。