我一直试图找出一个外部图像是否在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吗？
解决方法
我用简单的JavaScript重写了你的代码,使它更加独立于jQuery.核心功能没有改变.
小提琴： http://jsfiddle.net/EmjQG/2/
小提琴： 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
使用.complete和.height .width给出了预期的结果(FF 3.6.23,Chromium 14).
您很可能已在Chrome浏览器中停用了缓存功能.如果没有,请检查所服务图像的HTTP headers(是否存在缓存控制？).此标题存在于Google示例中
如果要检测图像何时(未)完成加载,请查看this question.
