JavaScript: cómo forzar a Image() a no usar el caché del navegador?

Si cargo la URL nextimg manualmente en el navegador, se obtiene una nueva imagen cada vez que vuelvo a cargar. Pero este pequeño código muestra la misma imagen en cada iteración de draw().JavaScript: cómo forzar a Image() a no usar el caché del navegador?

¿Cómo puedo forzar que myimg no se almacene en caché?

<html> 
    <head> 
    <script type="text/javascript"> 
     function draw(){ 
     var canvas = document.getElementById('canv'); 
     var ctx = canvas.getContext('2d'); 
     var rx; 
     var ry; 
     var i; 

     myimg = new Image(); 
     myimg.src = 'http://ohm:8080/cgi-bin/nextimg' 

     rx=Math.floor(Math.random()*100)*10 
     ry=Math.floor(Math.random()*100)*10 
     ctx.drawImage(myimg,rx,ry); 
     window.setTimeout('draw()',0); 
     } 
    </script> 
    </head> 
    <body onload="draw();"> 
    <canvas id="canv" width="1024" height="1024"></canvas> 
    </body> 
</html>

Fuente

2008-10-03 Mark Harrison

Eso realmente suena como un error en el navegador; puede presentarlo en http://bugs.webkit.org si está en Safari o https://bugzilla.mozilla.org/ para Firefox. ¿Por qué digo un posible error del navegador? Debido a que el navegador se da cuenta de que no debe almacenar en caché al volver a cargar, sin embargo, le proporciona una copia en caché de la imagen cuando la solicita de forma programática.

Dicho esto, ¿estás seguro de que estás dibujando algo? la API Canvas.drawImage no esperará a que se cargue una imagen, y está especificada para no dibujar si la imagen no se ha cargado completamente cuando intenta usarla.

Una mejor práctica es algo así como:

var myimg = new Image(); 
    myimg.onload = function() { 
     var rx=Math.floor(Math.random()*100)*10 
     var ry=Math.floor(Math.random()*100)*10 
     ctx.drawImage(myimg,rx,ry); 
     window.setTimeout(draw,0); 
    } 
    myimg.src = 'http://ohm:8080/cgi-bin/nextimg'

(también puede simplemente pasar draw como un argumento a setTimeout en lugar de utilizar una cadena, lo que permitirá ahorrar reparsing y la compilación de la misma cadena una y otra vez.)

Fuente

2008-10-03 01:10:12 olliej

La manera más fácil es una honda siempre cambiante cadena de consulta en el extremo:

var url = 'http://.../?' + escape(new Date())

Algunas personas prefieren usar Math.random() para que en lugar de escape(new Date()). Pero la forma correcta es probablemente alterar los encabezados que el servidor web envía para rechazar el almacenamiento en caché.

Fuente

2008-10-03 00:43:27 Dan

Dan, tipo de publicación anterior, pero seguramente te debo una cerveza en este caso. No es exactamente mi situación, pero me dio una gran idea. ¡Gracias! – brmore

Tuve que usarlo sin la barra oblicua final: 'var url = 'http; //.../ something.png' + '?' + Math.random()', ¡pero está funcionando bien! +1 para la advertencia de encabezados :) –

¡Qué belleza, me olvidé de este pequeño truco! – JDandChips

No se puede detener el almacenamiento en caché de la imagen en Javascript. Sin embargo, se puede jugar con el src/dirección de la imagen para forzarlo a almacenar en caché de nuevo:

[Image].src = 'image.png?' + (new Date()).getTime();

probablemente Usted puede tomar cualquiera de las soluciones de caché Ajax y aplicarlo aquí.

Fuente

2008-10-03 00:44:03

En realidad hay dos cachés que necesita omitir aquí: uno es el caché HTTP normal, que puede evitar utilizando los encabezados HTTP correctos en la imagen. Pero también debes evitar que el navegador vuelva a utilizar una copia en la memoria de la imagen; si decide que puede hacerlo, nunca llegará al punto de consultar su caché, por lo que los encabezados HTTP no serán de ayuda.

Para evitar esto, puede usar una querystring cambiante o un identificador de fragmento cambiante.

Ver mi publicación here para más detalles.

Fuente

2014-03-15 21:42:57 Doin

JavaScript: cómo forzar a Image() a no usar el caché del navegador?

Respuesta

Cuestiones relacionadas