norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Codigos » Links externos

Como impedir que el navegador cargue imágenes guardadas en su cache



Forzar la carga de imágenes frescas en páginas web con PHP y JavaScript, al recargar o refrescar el navegador.
Como impedir que el navegador cargue imágenes guardadas en su cache
Los navegadores guardan los archivos estáticos como imágenes, CSS y JavaScript en la cache, para acelerar su carga al acceder nuevamente a ellos.
Para eso se guían de las directivas Cache-Control, ETag, Expires y Last-Modified recibidas en los encabezados HTTP, al hacer la solicitud de la página al servidor.
Esta funcionalidad en un obstáculo cuando se desea que los lectores carguen la versión más reciente de ciertos archivos como imágenes o fotos.



Forzar la recarga de las imágenes e impedir que sean guardadas en cache


Antes de HTML5 era posible invalidar el cache de toda una página, mediante la metaetiqueta Cache-control y el valor: no-cache.
Ahora es necesario usar Cache busting.
Es el método de invalidar la cache de un archivo, obligando al navegador que lo cargue nuevamente del servidor.
Para hacerlo simplemente basta con cambiar su nombre o agregar a este un parámetro, que lo haga diferente.
Por ejemplo.
- En caso de un script, basta con indicar lo siguiente:
archivo.js?version=2
- En caso de una imagen, se puede impedir completamente, agregando a la ruta del archivo el parámetro "nocache", con un valor que cambie dinámicamente.
El resultado sería similar al siguiente:
<img src="imagen.jpg?nocache=145678">
Esta funcionalidad se puede implementar de dos formas, con PHP o con JavaScript.
La primera de ellas es la opción ideal y la más perfecta.
A continuación explico cómo hacerlo y lo demuestro con ejemplos.



Obligar a cargar las imágenes con PHP


<img src="imagen.jpg?nocache=<?php echo time(); ?>" alt="">
Las siguientes imágenes son generadas con PHP, generando una combinación de números y letras de forma aleatoria.
Al recargar esta página la primera de las imágenes sigue mostrando los mismos caracteres y la segunda, que usa la funcionalidad "nocache", muestra una combinación diferente.
Imagen escrita con PHP
Imagen escrita con PHP
Se puede copiar la dirección de ambas imágenes, para comprobar que la segunda se le agrega a su nombre un "query string".
Usa el siguiente botón para recargarlas.
Recargar



Obligar a cargar las imágenes con JavaScript


Los que por limitaciones de acceso no pueden usar PHP, pueden implementar la funcionalidad usando JavaScript de la siguiente forma.
<img id="imgnc" src="#" alt="">
<script>
    var d = new Date(); 
    document.getElementById("imgnc").src="imagen.jpg?ver=" + d.getTime();
</script>
Ejemplo:
Imagen escrita con PHP



Páginas relacionadas



Indica que te gusta y comparte

Sígueme en las redes sociales


 
Inicio | Mapa del sitio | Buscar | Sobre mí