javascript - page - cómo borrar o reemplazar una imagen en caché

javascript location reload without cache

Question

Sé que hay muchas maneras de evitar el almacenamiento en caché de imágenes (como las etiquetas META), así como algunos trucos para garantizar que la versión actual de una imagen se muestre con cada carga de página (como image.jpg? X = timestamp ), pero ¿hay alguna manera de borrar o reemplazar una imagen en la memoria caché de los navegadores para que ninguno de los métodos anteriores sea necesario?

Como ejemplo, digamos que hay 100 imágenes en una página y que estas imágenes se llaman "01.jpg", "02.jpg", "03.jpg", etc. Si se reemplaza la imagen "42.jpg", Hay alguna forma de reemplazarlo en la memoria caché para que "42.jpg" muestre automáticamente la nueva imagen en cargas de página sucesivas? No puedo usar el método de etiqueta META, porque necesito que ISN "T reemplazado permanezca almacenado en la memoria caché, y no puedo usar el método de indicación de fecha y hora, porque no quiero que TODAS las imágenes se vuelvan a cargar cada vez que la página cargas.

Me he atormentado el cerebro y he buscado en Internet una forma de hacerlo (preferiblemente a través de javascript), pero no tuve suerte. ¿Alguna sugerencia?

Answer 1

En el caso de que una imagen se vuelva a cargar, ¿hay alguna manera de BORRAR o REEMPLAZAR la imagen previamente almacenada en caché del lado del cliente? En mi ejemplo anterior, el objetivo es hacer que el navegador olvide qué es "42.jpg"

Estás ejecutando Firefox, ¿verdad?

• Encuentra el menú de Tools
• Seleccione Clear Private Data
• Desmarque todas las casillas de verificación excepto asegurarse de que la Cache esté marcada
• presiona OK

:-)

Con toda seriedad, nunca había escuchado que existiera tal cosa, y dudo que haya una API para ello. No puedo imaginarme que sea una buena idea para los desarrolladores de los navegadores dejarlos hurgar en su caché, y no hay ninguna motivación que pueda ver para que ellos implementen alguna vez esa característica.

NO PUEDO usar el método META tag O el método timestamp, porque quiero almacenar todas las imágenes en caché en circunstancias normales.

¿Por qué no puedes usar una marca de tiempo (o etag, que equivale a la misma cosa)? Recuerde que debe usar la marca de tiempo del archivo de imagen en sí , no solo Time.Now .
Odio ser el portador de malas noticias, pero no tienes otras opciones.

Si las imágenes no cambian, tampoco lo hará la marca de tiempo, por lo que todo se almacenará en caché "en circunstancias normales". Si las imágenes cambian, obtendrán una nueva marca de tiempo (que necesitarán por razones de almacenamiento en caché), pero esa marca de tiempo permanecerá válida por siempre hasta que alguien reemplace la imagen nuevamente.

Answer 2

Agregue la url de la imagen como esta

"image1.jpg?" + DateTime.Now.ToString ("ddMMyyyyhhmmsstt");

Solo agrega cadena al azar en la cadena de consulta

Gracias

Raju Jetla

Answer 3

Al contrario de lo que han dicho algunas de las otras respuestas, HAY una forma de que javascript en el lado del cliente reemplace una imagen en caché. El truco consiste en crear un <iframe> oculto, establecer su atributo src en la URL de la imagen, esperar a que se cargue y luego recargarla forzosamente llamando a location.reload(true) . Eso actualizará la copia en caché de la imagen. Luego puede reemplazar los elementos <img> en su página (o volver a cargar su página) para ver la versión actualizada de la imagen.

(Pequeña advertencia: si actualiza elementos <img> individuales, y si hay más de uno que tenga la imagen que se actualizó, debe borrarlos o eliminarlos TODOS, y luego reemplazarlos o restablecerlos. Si lo hace uno- uno por uno, algunos navegadores copiarán la versión en memoria de la imagen desde otras etiquetas, y el resultado es que es posible que no vea su imagen actualizada, a pesar de estar en la caché).

Publiqué un código para hacer este tipo de actualización here .

Answer 4

Cambia el ETAG para la imagen.

Answer 5

Cuando cambiar el nombre de archivo de la imagen no es una opción, utilice una variable de sesión del lado del servidor y una función javascript window.location.reload() . Como sigue:

Después de completar la carga:

Session("reload") = "yes"

En la página_carga:

If Session("reload") = "yes" Then
    Session("reload") = Nothing
    ClientScript.RegisterStartupScript(Me.GetType), "ReloadImages", "window.location.reload();", True)
End If

Esto permite que el navegador del cliente se actualice solo una vez porque la variable de sesión se restablece después de una ocurrencia.

Espero que esto ayude.

Answer 6

Estoy seguro de que la mayoría de los navegadores respetan el encabezado HTTP Last-Modified . Envíe esos y solicite una nueva imagen. El navegador lo almacenará en caché si la línea Last-Modified no cambia.

Answer 7

He intentado algo ridículamente simple:

Vaya a la carpeta FTP del sitio web y cambie el nombre de la carpeta IMG a IMG2. Actualiza tu sitio web y verás que faltan las imágenes. A continuación, cambie el nombre de la carpeta IMG2 a IMG y ya está, al menos me funcionó en Safari.

Answer 8

La razón por la que se usa el truco de la marca de tiempo "x =" es porque esa es la única forma de hacerlo en cada imagen. Eso o dinámicamente genera nombres de imágenes y apunta a una aplicación que genera la imagen.

Le sugiero que averigüe, en el lado del servidor, si la imagen ha sido modificada / actualizada, y si es así, imprima su etiqueta con el truco de indicación de la hora x para forzar la nueva imagen.

Answer 9

No, no hay forma de forzar que un archivo en el caché de un navegador sea eliminado, ya sea por el servidor web o por cualquier cosa que pueda poner en los archivos que envía. El caché del navegador es propiedad del navegador y está controlado por el usuario.

Por lo tanto, debe tratar cada archivo y cada URL como un recurso precioso que debe administrarse cuidadosamente.

Por lo tanto, la sugerencia de porneL de versionar los archivos de imagen parece ser la mejor respuesta a largo plazo. El ETAG se usa en circunstancias normales, pero tal vez sus esfuerzos lo han anulado. Intente cambiar el ETAG, como se sugiere.

Answer 10

Normalmente hago lo mismo que @Greg nos dijo, y tengo una función para eso:

function addMagicRefresh(url)
{
    var symbol = url.indexOf(''?'') == -1 ? ''?'' : ''&'';
    var magic = Math.random()*999999;
    return url + symbol + ''magic='' + magic;
}

Esto funcionará, ya que su servidor lo acepta y no utiliza el parámetro "mágico" de ninguna otra manera.

Espero que ayude.

Answer 11

Para reemplazar el caché de pictore, puede almacenar en el lado del servidor algún valor de versión y cuando carga la imagen simplemente envíe este valor en lugar del sello de tiempo. Cuando cambie su imagen, cambie su versión.

Answer 12

Pruebe este fragmento de código:

var url = imgUrl? + Math.random();

Esto asegurará que cada solicitud sea única, por lo que siempre obtendrá la última imagen.

Answer 13

Puede agregar un número aleatorio a la imagen, que es como darle una nueva versión. He implementado la lógica similar y está funcionando perfectamente.

<script>
var num = Math.random();
var imgSrc= "image.png?v="+num;
$(function() {
$(''#imgID'').attr("src", imgSrc);
})
</script>

Answer 14

Si está escribiendo la página dinámicamente, puede agregar la marca de tiempo del último cambio a la URL:

<img src="image.jpg?lastmod=12345678" ...

Answer 15

Ver http://en.wikipedia.org/wiki/URI_scheme

Tenga en cuenta que puede proporcionar un nombre de usuario único: contraseña @ combo como prefijo a la parte de dominio del uri. En mi experimentación, descubrí que la inclusión de esto con una identificación falsa (o una contraseña que supongo) da como resultado que el recurso sea único, lo que rompe el almacenamiento en caché como lo desea.

Simplemente use una marca de tiempo como nombre de usuario y, por lo que yo sé, el servidor ignora esta parte de la uri, siempre que la autenticación no esté activada.

Por cierto, tampoco pude usar los trucos anteriores con un problema de almacenamiento en caché del ícono del marcador de google que tenía cuando el truco de la marca de tiempo "param =" funcionó, pero causó problemas con la desaparición de las superposiciones. Nunca pude entender por qué sucedía esto, pero hasta ahora estoy muy bien usando este método. De lo que no estoy seguro es si el paso de credenciales falsas tendrá algún efecto adverso en el rendimiento del servidor. Si alguien sabe que me interesaría saber, aún no estoy en producción de alto volumen.

Por favor, informa tus resultados.

Answer 16

prueba debajo de las soluciones,

myImg.src = " http://localhost/image.jpg ?" + nueva Fecha (). getTime ();

Las soluciones anteriores funcionan para mí :)

Answer 17

<meta> es absolutamente irrelevante. De hecho, no debe intentar usarlo para controlar la caché en absoluto (para el momento en que algo lee el contenido del documento, ya está en la memoria caché).

En HTTP, cada URL es independiente. Hagas lo que hagas con el documento HTML, no se aplicará a las imágenes.

Para controlar el almacenamiento en caché, puede cambiar las URL cada vez que cambie su contenido. Si actualiza las imágenes de vez en cuando, permita que se guarden en caché para siempre y use un nuevo nombre de archivo (con una versión, hash o una fecha) para la nueva imagen: es la mejor solución para archivos de larga duración.

Si su imagen cambia muy a menudo (cada pocos minutos, o incluso en cada solicitud), envíe Cache-control: no-cache o Cache-control: max-age= xx donde xx es el número de segundos que la imagen está "fresca" .

La URL aleatoria para archivos de corta vida es mala idea. Contamina los cachés con archivos inútiles y fuerza que los archivos útiles se purguen antes.

Si tiene Apache y mod_headers o mod_expires , cree el archivo .htaccess con las reglas apropiadas.

<Files ~ "-nocache/.jpg">
   Header set Cache-control "no-cache"
</Files>

Arriba, los archivos *-nocache.jpg no se almacenarán en caché.

También podría servir imágenes a través de secuencias de comandos PHP (tienen horrible capacidad de caché de forma predeterminada;)