Comment savoir lorsqu'une image est déjà dans le cache du navigateur dans IE9?

Question

IE9 montre faux complete propriété avec les éléments suivants:

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

Si vous exécutez ce code dans une console de navigateur, (prévoir suffisamment de temps pour l'image à charger) puis exécutez à nouveau. IE9 est le seul navigateur que j'ai testé montrant faux la deuxième fois. Cela semble être un bug connu, à partir de google simple recherche. J'ai besoin d'une solution de contournement si quelqu'un en a un.

Cela pourrait être un problème de synchronisation, comme en laissant le code placé au-dessus d'une variable globale à la:

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

et ensuite tester les propriétés de cette variable donne des résultats différents:

img[0].complete === true 

et

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

Il doit y avoir un autre moyen d'obtenir cette infom ation. Des idées ... Merci!

Answer 1

Vous ne pouvez pas dire si elle est mise en mémoire cache, mais vous pouvez forcer une nouvelle charge par « salage » le nom du fichier:

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

Answer 2

Voici comment je précharger généralement une image:

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

Je ne l'ai pas profondément débogué dans IE9, mais je n'ai pas rencontré de problèmes avec cela. Le code a été extrait de https://github.com/tentonaxe/jQuery-preloadImages/blob/master/jquery.preloadimages.js et modifié.

Answer 3

Vous pouvez essayer une requête AJAX sur l'image et voir le code d'état. Si c'est 304, cela signifie que l'image a été mise en cache. Je ne sais pas si ça marcherait bien. Peut-être que AJAX fait du cache-busting.

Answer 4

J'utilise ceci:

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

Un échantillon:

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

Answer 5

Je sais que cela a été demandé il y a un million d'années, mais je me dis que je voudrais apporter ma solution qui est similaire, mais a moins de frais généraux et i/o.

Fondamentalement, vous créez une méthode jQuery personnalisée qui exécute les exploits semblables en une seule fonction:

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

Cette consolide la vérification de tous les événements possibles dans un (deux mises en cache et uncached), mais fait aussi méthode chainable. Vous pouvez l'appeler avec:

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

Fonction cross-browser, retour à IE6. Notez qu'il vérifie d'abord la mise en cache et déclenche un événement de chargement avec espace de noms une seule fois pour éviter les rechargements si vous appelez deux fois la fonction avec cette logique, mais aussi pour autoriser les événements de chargement personnalisés à être liés (le cas échéant).