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

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


Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
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



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí