Usando image.complete para encontrar si la imagen está en caché en cromo?

He estado tratando de averiguar si una imagen externa se almacena en caché en el navegador con JS, este es el código que tengo hasta ahora:Usando image.complete para encontrar si la imagen está en caché en cromo?

<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>

Funciona perfectamente en Firefox pero siempre devuelve false en el cromo.

¿Alguien tiene alguna idea de cómo hacerlo funcionar con Chrome?

Fuente

2011-10-21 user979390

¿Por qué debería importar si un activo está en caché o no? :/ – Matchu

W3C estándar no tiene ninguna API, por lo que es probable que esté utilizando algunos hacks específicos del navegador que no es bueno hacer – Ankur

Además, incluso si la imagen está almacenada en la memoria caché, es muy probable que la carga de la imagen sea asincrónica, y es poco probable que el navegador haya terminado de cargar y mostrar la imagen antes de ejecutar la siguiente línea de JavaScript. – RoToRa

He reescrito tu código en JavaScript, para hacerlo más independiente en jQuery. La funcionalidad central no ha cambiado. violín: 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

La primera vez, me sale false and false. Después de ejecutar el código nuevamente, obtengo true and false.

^{Usando .complete y .height + .width da los resultados esperados (FF 3.6.23, Chromium 14).
Es muy probable que haya desactivado el almacenamiento en caché en su navegador Chrome. Si no, verifique el HTTP headers de su imagen servida (¿Está presente el Cache-control?). Este encabezado existe en la muestra de Google
Si desea detectar cuándo una imagen (no) ha terminado de cargarse, eche un vistazo a this question.}

Fuente

2011-10-21 09:19:01

He habilitado la caché y el control de caché no está presente. Lo que quiero saber es si la imagen se carga instantáneamente (desde el caché) o si se carga progresivamente. El código que publiqué funciona bien en FF pero nunca funciona en Chrome. – user979390

@ user979390 He incluido un caso de prueba en funcionamiento. Ver http://jsfiddle.net/EmjQG/2/. –

¿Eso también devuelve "verdadero - falso" en Chrome? para mí siempre devuelve falso - falso en Chrome, supongo que la mejor solución de navegador cruzado será configurar un contador para sincronizar la carga de la imagen. – user979390

Usando image.complete para encontrar si la imagen está en caché en cromo?

Respuesta

Cuestiones relacionadas