navegadores - JavaScript: ¿Cómo forzar a Image() a no usar el caché del navegador?
limpiar cache navegador jquery (4)
No se puede detener el almacenamiento en caché de la imagen en Javascript. Sin embargo, puede juguetear con la dirección / src de la imagen para obligarla a guardar en caché de nuevo:
[Image].src = ''image.png?'' + (new Date()).getTime();
Probablemente puedas tomar cualquiera de las soluciones de caché Ajax y aplicarla aquí.
Si cargo la URL nextimg manualmente en el navegador, se obtiene una nueva imagen cada vez que vuelvo a cargar. Pero este fragmento de código muestra la misma imagen en cada iteración de draw() .
¿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>
Eso en realidad suena como un error en el navegador: puede presentar un archivo en http://bugs.webkit.org si está en Safari o en 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 eso, ¿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 pasar draw como argumento a setTimeout en lugar de usar una cadena, lo que ahorrará reparsing y compilación de la misma cadena una y otra vez).
La manera más fácil es colgar una cadena de cálculo en constante cambio al final:
var url = ''http://.../?'' + escape(new Date())
Algunas personas prefieren usar Math.random() para eso 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é.
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 aquí para más detalles.