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

Question

IE9 显示错误的complete 属性，如下所示：

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

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

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

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

然后测试该变量的属性会得到不同的结果：

img[0].complete === true

和

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

必须有其他方式获取此信息。任何想法...谢谢！

Answer 1

我用这个：

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);  
}); 

Answer 2

这就是我通常预加载图像的方式：

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 提取并修改的。

Answer 3

您可以在图像上尝试 AJAX 请求并查看状态代码。如果是 304，则表示图像已被缓存。不知道这会有多好。也许 AJAX 做了一些缓存清除。

Answer 4

我知道这是在一百万年前提出的问题，但我想我会贡献我的解决方案，该解决方案类似但开销和 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。请注意，它首先检查缓存，如果不是，则仅触发一次命名空间加载事件以防止在您使用该逻辑两次调用该函数时重新加载，还允许绑定自定义加载事件（如果适用）。

Answer 5

您无法判断它是否已缓存，但您可以通过“加盐”文件名来强制重新加载：

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