如何判断图像是否已经在IE9的浏览器缓存中？

问题描述：

IE9正显示出假complete属性与以下：如何判断图像是否已经在IE9的浏览器缓存中？

$("<img/>",{src:"http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg"}).each(function(){console.log(this.complete);});

如果运行在浏览器控制台这个代码，（留出足够的时间用于图像加载），然后再次运行它。 IE9是我测试过的唯一一款第二次显示错误的浏览器。这似乎是一个已知的错误，从一些简单的谷歌搜索。 我需要一个解决方法，如果任何人有一个。

这可能是一个时间问题，因为让上面的代码中设置一个全局变量一拉：

var img = $("<img....

，然后测试该变量的性质给出了不同的结果：

img[0].complete === true

和

img[0].readyState === "complete"

必须有一些其他的方式来获得这个infom通货膨胀。任何想法...谢谢！

这不是基本上相同的问题[你问11个小时前]（http://stackoverflow.com/questions/8338770/why-am-i-getting-a-false-only-in- IE9换图像完整的属性）？ –

@ Xeon06确实存在细微的差异，他们的其他问题似乎是措辞，以至于它询问错误本身。在这里我要求一个解决方法，再加上简化的代码在这个问题中可能不那么令人困惑。 – bodine

'如果（image.complete || image.readyState ==“complete”）'是你将如何测试，如果它的缓存 – Esailija

答

，如果它的缓存你不能说，但你可以通过“盐析”的文件名强制新鲜负载：

src:"http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg?"+new Date()

其实我不想重新加载图像，这是重点。加载事件只会触发一次，之后如果我尝试再次构建此图像，它应该在浏览器缓存中找到它。 – bodine

答

这是怎么了，我通常预加载图像：

var img = new Image(); 
$(img).attr('src', "foo.jpg"); 
if (img.complete || img.readyState === 4) { 
    // image is cached 
    alert("the image was cached!"); 
} else { 
    $(img).load(function() { 
     // image was not cached, but done loading 
     alert("the image was not cached, but it is done loading."); 
    }); 
}

我还没有在IE9中深入调试过，但我没有遇到任何问题。

该代码被从https://github.com/tentonaxe/jQuery-preloadImages/blob/master/jquery.preloadimages.js中拉出并修改。

在IE9中运行该代码，并带有实际图像，并且每次都会加载它。发布在我的问题中的代码是与您在此处发布的内容类似的更大块的一部分。看到我的其他[问题]（http://stackoverflow.com/questions/8338770/why-am-i-getting-a-false-only-in-ie9-for-image-complete-property） – bodine

很高兴知道，我将不得不在晚些时候深入研究。 –

答

您可以尝试图像上的AJAX请求并查看状态码。如果它是304，则意味着图像被缓存。不知道这会有多好，但。也许AJAX做一些缓存破坏。

答

我用这个：

function doWhenLoaded(obj,callback) { 

if($.browser.msie) { 
    var src=$(obj).attr("src"); 
    $(obj).attr("src",""); 
    $(obj).attr("src",src); 
} 

$(obj).one("load",callback).each(function(){ 
    // alert(this.readyState+" "+this.src); 
    if(
     this.complete 
     || this.readyState == "complete" 
     || this.readyState == 4 
     || ($.browser.msie && parseInt($.browser.version) == 6) 
    ) { 
     $(this).trigger("load"); 
    } 
}); 
}

样本：

doWhenLoaded("#main_background_img",function(){ 
    $("#main_background_img").slideDown(1000); 
});

答

我知道这是一个万年前问过，但我想我会贡献我的解决方案，它是类似的，但开销较少和I/O。

基本上，你创建一个执行于一身的功能类似的壮举定制的jQuery方法：

$.fn.imgLoad = function(callback) { 
    return this.each(function() { 
     if(callback){ 
      if(this.complete || (this.readyState === 4) || (this.readyState === 'complete')) { 
       callback.apply(this); 
      } else { 
       $(this).one('load.imgCallback', function(){ 
        callback.apply(this); 
       }); 
      } 
     } 
    }); 
}

这将所有可能事件的检查到一个（包括缓存和非高速缓存），也使得方法可链接。你可以这样称呼它：

$('img').imgLoad(function(){ 
    console.log('loaded'); 
});

工作跨浏览器，回到IE6。请注意，它首先检查缓存，并且如果不触发命名空间加载事件一次，以防止在您使用该逻辑调用该函数两次时重新加载，但也允许自定义加载事件被绑定（如果适用）。

如何判断图像是否已经在IE9的浏览器缓存中？

相关推荐