parametros - no cache html5
Cómo forzar a un navegador web a NO almacenar en caché las imágenes (14)
Fondo
Estoy escribiendo y usando una herramienta de administración de contenido basada en CGI (Perl) muy simple para dos sitios web pro-bono. Proporciona al administrador del sitio web formularios HTML para eventos donde llenan los campos (fecha, lugar, título, descripción, enlaces, etc.) y los guarda. En ese formulario, permito que el administrador cargue una imagen relacionada con el evento. En la página HTML que muestra el formulario, también estoy mostrando una vista previa de la imagen cargada (etiqueta HTML img).
El problema
El problema ocurre cuando el administrador quiere cambiar la imagen. Tendría que presionar el botón "navegar", elegir una nueva imagen y presionar "ok". Y esto funciona bien
Una vez que se carga la imagen, mi CGI de back-end maneja la carga y vuelve a cargar el formulario correctamente.
El problema es que la imagen mostrada no se actualiza. La imagen anterior aún se muestra, aunque la base de datos tenga la imagen correcta. Lo he reducido al hecho de que la IMAGEN SE CACHEDE en el navegador web. Si el administrador pulsa el botón RELOAD en Firefox / Explorer / Safari, todo se actualiza bien y aparece la nueva imagen.
Mi solución - No funciona
Estoy tratando de controlar la memoria caché escribiendo una instrucción HTTP expira con una fecha muy lejana en el pasado.
Expires: Mon, 15 Sep 2003 1:00:00 GMT
Recuerde que estoy en el lado administrativo y realmente no me importa si las páginas tardan un poco más en cargarse porque siempre están expiradas.
Pero, esto tampoco funciona.
Notas
Al cargar una imagen, su nombre de archivo no se guarda en la base de datos. Se renombra como Image.jpg (para simplemente cosas al usarlo). Al reemplazar la imagen existente por una nueva, el nombre tampoco cambia. Solo cambia el contenido del archivo de imagen.
El servidor web es provisto por el servicio de alojamiento / ISP. Utiliza Apache.
Pregunta
¿Hay alguna manera de obligar al navegador web a NO almacenar en caché las cosas de esta página, ni siquiera las imágenes?
Estoy haciendo malabares con la opción de "guardar el nombre de archivo" con la base de datos. De esta forma, si se cambia la imagen, el src de la etiqueta IMG también cambiará. Sin embargo, esto requiere muchos cambios en todo el sitio y prefiero no hacerlo si tengo una mejor solución. Además, esto no funcionará si la nueva imagen cargada tiene el mismo nombre (digamos que la imagen se retoca un poco y se vuelve a cargar).
Al cargar una imagen, su nombre de archivo no se guarda en la base de datos. Se renombra como Image.jpg (para simplemente cosas al usarlo).
Cambia esto y has solucionado tu problema. Utilizo marcas de tiempo, como con las soluciones propuestas anteriormente: Imagen- <indicación de la hora> .jpg
Presumiblemente, se pueden superar los problemas que se evitan manteniendo el mismo nombre de archivo para la imagen, pero no se dice cuáles son.
Agregar un sello de tiempo <img src="picture.jpg?t=<?php echo time();?>">
siempre le dará a su archivo un número al azar al final y lo dejará en la memoria caché
Armin Ronacher tiene la idea correcta. El problema es que las cadenas aleatorias pueden colisionar. Yo usaría:
<img src="picture.jpg?1222259157.415" alt="">
donde "1222259157.415" es la hora actual en el servidor. (Nota: utilicé el time.time () de python para generar eso)
Con el potencial de proxies transparentes mal interpretados entre usted y el cliente, la única manera de garantizar totalmente que las imágenes no se almacenarán en caché es dándoles un uri único, algo así como etiquetar una marca de tiempo como una cadena de consulta o como parte del camino.
Si esa marca de tiempo corresponde a la hora de la última actualización de la imagen, puede almacenar en caché cuando sea necesario y mostrar la nueva imagen en el momento adecuado.
Desde mi punto de vista, desactivar el almacenamiento en caché de imágenes es una mala idea. En absoluto.
El problema de raíz aquí es: cómo forzar al navegador a actualizar la imagen, cuando se ha actualizado en el lado del servidor.
De nuevo, desde mi punto de vista personal, la mejor solución es desactivar el acceso directo a las imágenes. En su lugar, acceda a las imágenes a través del filtro / servlet del lado del servidor / otras herramientas / servicios similares.
En mi caso, es un servicio de descanso, que devuelve una imagen y adjunta ETag en respuesta. El servicio mantiene el hash de todos los archivos; si se cambia el archivo, se actualiza el hash. Funciona perfectamente en todos los navegadores modernos. Sí, toma tiempo implementarlo, pero vale la pena.
La única excepción son los favicons. Por alguna razón, no funciona. No pude obligar al navegador a actualizar su caché desde el servidor. ETags, Cache Control, Expires, Pragma headers, nada ayudó.
En este caso, agregar algún parámetro aleatorio / versión en url, parece ser la única solución.
Puede escribir un script proxy para servir imágenes, aunque eso es un poco más laborioso. Algo le gusta esto:
HTML:
<img src="image.php?img=imageFile.jpg&some-random-number-262376" />
Guión:
// PHP
if( isset( $_GET[''img''] ) && is_file( IMG_PATH . $_GET[''img''] ) ) {
// read contents
$f = open( IMG_PATH . $_GET[''img''] );
$img = $f.read();
$f.close();
// no-cache headers - complete set
// these copied from [php.net/header][1], tested myself - works
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Some time in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
// image related headers
header(''Accept-Ranges: bytes'');
header(''Content-Length: ''.strlen( $img )); // How many bytes we''re going to send
header(''Content-Type: image/jpeg''); // or image/png etc
// actual image
echo $img;
exit();
}
En realidad, los encabezados sin caché o el número aleatorio en image src deberían ser suficientes, pero dado que queremos ser a prueba de balas ...
Revisé todas las respuestas en la web y la mejor parecía ser: (en realidad no lo es)
<img src="image.png?cache=none">
primero.
Sin embargo, si agrega el parámetro cache = none (que es una palabra estática "none"), no tiene ningún efecto, el navegador aún se carga desde el caché.
La solución a este problema fue:
<img src="image.png?nocache=<?php echo time(); ?>">
donde básicamente agrega la marca de tiempo de unix para hacer que el parámetro sea dinámico y no haya caché, funcionó.
Sin embargo, mi problema era un poco diferente: estaba cargando sobre la marcha la imagen del gráfico php generado y controlaba la página con los parámetros $ _GET. Quería que se leyera la imagen de la memoria caché cuando el parámetro URL GET permanezca igual y no caché cuando cambien los parámetros GET.
Para resolver este problema, necesitaba hash $ _GET, pero dado que es una matriz, aquí está la solución:
$chart_hash = md5(implode(''-'', $_GET));
echo "<img src=''/images/mychart.png?hash=$chart_hash''>";
Editar :
Aunque la solución anterior funciona bien, a veces desea servir la versión en caché HASTA que se cambie el archivo. (con la solución anterior, desactiva por completo la memoria caché de esa imagen). Para que se sirva una imagen en caché desde el navegador HASTA que haya un cambio en el archivo de imagen, utilice:
echo "<img src=''/images/mychart.png?hash=" . filemtime(''mychart.png'') . "''>";
filemtime () obtiene la hora de modificación del archivo.
Solución simple: adjunte una cadena de consulta aleatoria a la imagen:
<img src="foo.cgi?random=323527528432525.24234" alt="">
Lo que dice el HTTP RFC:
Cache-Control: no-cache
Pero eso no funciona tan bien :)
Soy un nuevo codificador, pero esto es lo que se me ocurrió, para evitar que el navegador guarde en caché y mantenga mis vistas de cámara web:
<meta Http-Equiv="Cache" content="no-cache">
<meta Http-Equiv="Pragma-Control" content="no-cache">
<meta Http-Equiv="Cache-directive" Content="no-cache">
<meta Http-Equiv="Pragma-directive" Content="no-cache">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">
No estoy seguro de qué funciona en qué navegador, pero funciona para algunos: IE: funciona cuando la página web se actualiza y cuando se vuelve a visitar el sitio web (sin una actualización). CROMO: funciona solo cuando la página web se actualiza (incluso después de una nueva visita). SAFARI y iPad: no funciona, tengo que borrar la historia y los datos web.
¿Alguna idea sobre SAFARI / iPad?
Su problema es que, a pesar del encabezado Expires: su navegador está reutilizando su copia en memoria de la imagen antes de actualizarla, en lugar de verificar su caché.
Tuve una situación muy similar cargando imágenes de productos en el backend de administración para un sitio tipo tienda, y en mi caso decidí que la mejor opción era usar javascript para forzar una actualización de imagen, sin usar ninguna de las técnicas de modificación de URL. ya he mencionado aquí. En cambio, puse la URL de la imagen en un IFRAME oculto, llamado location.reload(true) en la ventana de IFRAME, y luego reemplacé mi imagen en la página. Esto obliga a actualizar la imagen, no solo en la página en la que estoy, sino también en las páginas posteriores que visito, sin que el cliente o el servidor tenga que recordar ninguna URL querystring o los parámetros de los identificadores de fragmentos.
Publiqué un código para hacer esto en mi respuesta here .
Supongo que la pregunta original se refiere a las imágenes almacenadas con cierta información de texto. Por lo tanto, si tiene acceso a un contexto de texto al generar src = ... url, considere almacenar / usar CRC32 de bytes de imagen en lugar de sin sentido al azar o marca de tiempo. Luego, si se visualiza la página con muchas imágenes, solo se volverán a cargar las imágenes actualizadas. Eventualmente, si el almacenamiento de CRC es imposible, se puede calcular y anexar a la url en tiempo de ejecución.
Utilizo la función de tiempo modificado del archivo de PHP , por ejemplo:
echo <img src=''Images/image.png?" . filemtime(''Images/image.png'') . "'' />";
Si cambia la imagen, entonces se usa la nueva imagen en lugar de la almacenada en caché, debido a que tiene una marca de tiempo modificada diferente.
Yo usaría:
<img src="picture.jpg?20130910043254">
donde "20130910043254" es la hora de modificación del archivo.
Al cargar una imagen, su nombre de archivo no se guarda en la base de datos. Se renombra como Image.jpg (para simplemente cosas al usarlo). Al reemplazar la imagen existente por una nueva, el nombre tampoco cambia. Solo cambia el contenido del archivo de imagen.
Creo que hay dos tipos de soluciones simples: 1) las que vienen primero a la mente (soluciones directas, porque son fáciles de encontrar), 2) aquellas con las que terminas después de pensar las cosas (porque son fáciles de utilizar). Aparentemente, no siempre te beneficiarás si decides pensarlo bien. Pero las segundas opciones están bastante subestimadas, creo. Solo piense por qué php es tan popular;)
usar Class = "NO-CACHE"
muestra html:
<div>
<img class="NO-CACHE" src="images/img1.jpg" />
<img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>
jQuery:
$(document).ready(function ()
{
$(''.NO-CACHE'').attr(''src'',function () { return $(this).attr(''src'') + "?a=" + Math.random() });
});
javascript:
var nods = document.getElementsByClassName(''NO-CACHE'');
for (var i = 0; i < nods.length; i++)
{
nods[i].attributes[''src''].value += "?a=" + Math.random();
}
Resultado: src = "images / img1.jpg" => src = "images / img1.jpg? A = 0.08749723793963926"