使用image.complete来查找在Chrome上是否有缓存的图像？

Question

使用image.complete来查找在Chrome上是否有缓存的图像？

javascriptjqueryimagecross-browserimage-caching

8

我一直在尝试使用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>

它在火狐浏览器上能够完美地运行，但在谷歌浏览器上总是返回false。

有人有什么办法可以让它在谷歌浏览器上运行吗？

- user979390

1

为什么缓存资产是否存在很重要呢？ :/ - Matchu

W3C标准没有这样的API，所以你可能会使用一些特定于浏览器的hack，这不是一个好的做法。 - Ankur

即使图像已缓存，加载图像仍然很可能是异步的，并且在执行下一个 JavaScript 行之前，浏览器很难完成加载和显示图像。 - RoToRa

相关内容：https://dev59.com/FnI-5IYBdhLWcg3wMFQf - Adriano

@Matchu，如果您知道缓存图像的URL（使用localStorage），则可以更早地绘制它们，而不是等待稍后加载（在DOMContentLoaded或load事件中，因为CSS和其他内容可能具有优先级，但如果可能的话，可以看到更多的图像）。 - Dan Froberg

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

我已经使用纯JavaScript重写了你的代码，使其不再依赖于jQuery。核心功能没有改变。 Fiddle：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 可以得到预期的结果（在 Firefox 3.6.23 和 Chromium 14 中测试）。} 很可能你已经禁用了 Chrome 浏览器中的缓存。如果没有，请检查所提供图像的HTTP标头（是否存在 Cache-control？）。Google 示例中存在该标头。

如果你想要检测图像是否已经(未)完成加载，请参考这个问题。