evitar - no cache html
Deshabilitar el caché para algunas imágenes (13)
Genero algunas imágenes usando una lib de PHP.
En ocasiones, el navegador no carga el nuevo archivo generado.
¿Cómo puedo desactivar la caché solo para imágenes creadas dinámicamente por mí?
Nota: Tengo que usar el mismo nombre para las imágenes creadas a lo largo del tiempo.
Agreguemos otra solución al grupo.
Agregar una cadena única al final es una solución perfecta.
example.jpg?646413154
La siguiente solución amplía este método y proporciona tanto la capacidad de almacenamiento en caché como la búsqueda de una nueva versión cuando se actualiza la imagen.
Cuando la imagen se actualiza, se filemtime el tiempo de filemtime .
<?php
$filename = "path/to/images/example.jpg";
$filemtime = filemtime($filename);
?>
Ahora imprima la imagen:
<img src="images/example.jpg?<?php echo $filemtime; ?>" >
Cambiar la fuente de la imagen es la solución. De hecho, puede hacer esto agregando una marca de tiempo o un número aleatorio a la imagen.
Sería mejor agregar una suma de comprobación de, por ejemplo, los datos que representa la imagen. Esto permite el almacenamiento en caché cuando sea posible.
Las estrategias de almacenamiento en caché del navegador pueden controlarse mediante encabezados HTTP. Recuerda que solo son una pista, de verdad. Debido a que los navegadores son terriblemente inconsistentes en este campo (y en cualquier otro), necesitará varios encabezados para obtener el efecto deseado en una variedad de navegadores.
header("Pragma-directive: no-cache");
header("Cache-directive: no-cache");
header("Cache-control: no-cache");
header("Pragma: no-cache");
header("Expires: 0");
Lo he usado para resolver mi problema similar ... mostrar un contador de imágenes (de un proveedor externo). No se actualizó siempre correctamente. Y después de agregar un parámetro aleatorio, todo funciona bien :)
Agregué una cadena de fecha para asegurar la actualización al menos cada minuto.
código de muestra (PHP):
$output .= "<img src=/"http://xy.somecounter.com/?id=1234567890&".date(ymdHi)."/" alt=/"somecounter.com/" style=/"border:none;/">";
Eso da como resultado un enlace src como:
http://xy.somecounter.com/?id=1234567890&1207241014
Revisé todas las respuestas y la mejor parecía ser (que no 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.
Sé que este tema es antiguo, pero se clasifica muy bien en Google. Descubrí que poner esto en tu encabezado funciona bien;
<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">
Si necesita hacerlo dinámicamente en el navegador usando javascript, aquí hay un ejemplo ...
<img id=graph alt=""
src="http://www.kitco.com/images/live/gold.gif"
/>
<script language="javascript" type="text/javascript">
var d = new Date();
document.getElementById("graph").src =
"http://www.kitco.com/images/live/gold.gif?ver=" +
d.getTime();
</script>
Si tiene una URL de imagen codificada, por ejemplo: http://example.com/image.jpg , puede usar php para agregar encabezados a su imagen.
Primero debes hacer que apache procese tu jpg como php. Vea aquí: ¿Es posible ejecutar PHP con la extensión file.php.jpg?
Cargue la imagen (imagecreatefromjpeg) del archivo y luego agregue los encabezados de las respuestas anteriores. Use el encabezado de la función php para agregar los encabezados.
A continuación, imprima la imagen con la función imagejpeg.
Tenga en cuenta que es muy inseguro dejar que php procese imágenes jpg. También tenga en cuenta que no he probado esta solución, por lo que depende de usted hacer que funcione.
Simple, envíe una ubicación de encabezado.
Mi sitio, contiene una imagen, y después de subir la imagen, no cambia, luego agrego este código:
<?php header("Location: pagelocalimage.php"); ?>
Funciona para mi.
Solo estaba buscando una solución para esto, y las respuestas anteriores no funcionaron en mi caso (y no tengo suficiente reputación para comentar sobre ellas). Resulta que, al menos para mi caso de uso y el navegador que estaba usando (Chrome en OSX), lo único que parecía evitar el almacenamiento en caché era:
Cache-Control = ''no-store''
Para completar, ahora estoy usando los 3 de ''no-cache, no-store, must-revalidate''
Así que en mi caso (al publicar imágenes generadas dinámicamente desde Flask en Python), tuve que hacer lo siguiente para poder trabajar en tantos navegadores como fuera posible ...
def make_uncached_response(inFile):
response = make_response(inFile)
response.headers[''Pragma-Directive''] = ''no-cache''
response.headers[''Cache-Directive''] = ''no-cache''
response.headers[''Cache-Control''] = ''no-cache, no-store, must-revalidate''
response.headers[''Pragma''] = ''no-cache''
response.headers[''Expires''] = ''0''
return response
Una solución común y simple a este problema que se siente como un truco pero es bastante portátil es agregar una cadena de consulta generada aleatoriamente a cada solicitud de la imagen dinámica.
Así por ejemplo -
<img src="image.png" />
Se convertiría
<img src="image.png?dummy=8484744" />
O
<img src="image.png?dummy=371662" />
Desde el punto de vista del servidor web, se accede al mismo archivo, pero desde el punto de vista del navegador no se puede realizar el almacenamiento en caché.
La generación de números aleatorios puede ocurrir en el servidor cuando se sirve la página (solo asegúrese de que la página no se almacena en caché ...), o en el cliente (usando JavaScript).
Deberá verificar si su servidor web puede hacer frente a este truco.
tuve este problema y vencer así.
var newtags=''<div class="addedimage"><h5>preview image</h5><img src="''+one+''?nocache=''+Math.floor(Math.random() * 1000)+''"></div>'';
La solución 1 no es genial. Funciona, pero la adición de cadenas de consulta hacky al azar o al final de sus archivos de imagen no es escalable y hará que el navegador vuelva a descargar y almacenar en caché cada versión de cada imagen que envíe.
La solución 2 es inútil. Agregar encabezados nocache a un archivo de imagen no solo es muy difícil de implementar, sino que es completamente impráctico porque requiere que prediga cuándo será necesario con anticipación , la primera vez que carga cualquier imagen que cree que podría cambiar en algún momento del proceso. futuro.
Ingresa Etags ...
La mejor manera que he encontrado para resolver esto es usar ETAGS dentro de un archivo .htaccess en su directorio de imágenes. Lo siguiente le dice a Apache que envíe un hash único al navegador en los encabezados del archivo de imagen. Este hash solo cambia cuando se modifica el archivo de imagen y este cambio activa el navegador para volver a cargar la imagen la próxima vez que se solicite.
<FilesMatch "/.(jpg|jpeg)$">
FileETag MTime Size
</FilesMatch>