Cuando se programan webs, no es raro encontrarse con el caso en que tienes que recargar recargar o refrescar la imagen de una página.
Lo típico para cambiar una imagen, o cargar una nueva, consiste en modificar el atributo “src” del tag “img” . Hasta aquí ningún secreto.
Además, este método va a funcionar siempre, el 100% de las veces, con una salvedad, el caso en que la imagen ya haya sido cargada, pero tu quireas recargarla de nuevo porque sabes que en el servidor ha cambiado. En este último caso, el navegador que es muy listo (y sin embargo es muy lógico que se comporte de esta manera), lo que hace es cachear todas las peticiones hasta que recargas la página entera, o abres una nueva página.
Para entender un poco a qué me refiero, aquí va el ejemplo ilustrativo (dicese de ejemplo para facilitar la comprensión pero que en la práctica no suele servir para nada):
Imagina que en el servidor tienes un script que se ejecuta cada minuto y genera una imagen con la hora del servidor (estupido, lo sé), y tú que eres un crack con javascript, no quieres que se refresque toda la página, porque hay muchas cosas en ella, tu quieres usar javascript para que se refresque única y sólamente la imagen en cuestión, y que cada minuto recargue del servidor dicha imagen.
¿Cual es tú problema con esto?
Efectivamente, ¡el path de la imagen es el mismo! es decir que la imagen que tienes que cargar es la que ya has cargado, y por lo tanto, el navegador ya laha cacheado y no va a recargar la imagen, que es lo que tú quieres.
Estúpido el ejemplo, ¿verdad que si? ¿Pero a que se entiende todo? :p
Si haces la prueba, verás que al navegador no le importa si eliminas el <img> que existia y creas uno nuevo o si pones otro src y luego vuelves a poner el anterior.
Mientras la URL sea la misma no hay nada que hacer, el navegador ha cacheado la imagen, y aunque tu sabes que la imagen del servidor es distinta, no hay forma humana de hacerselo saber al servidor.
Ahora bien, si cargas una URL distinta todo cambia. Y ahora te preguntarás ¿Cómo puedes cargar una URL distinta y cargar el mismo archivo? Fácil, añade un query string distinto cada vez 
Resumiendo, que si la imagen original es:
<img src="http://servidor/path/a/imagen.png" alt="" />Puedes conseguir que se recarge añadiendo cualquier query string, como por ejemplo:
<img src="http://servidor/path/a/imagen.png?nocache=1" alt="" />Y sucesivamente incrementar el valor de “nocache”. El nombre de la variable es lo de menos
Si usamos jQuery, el código podría ser algo como:
$("ExampleImage").attr ('src', imageSource + "?nocache=" + (new Date()).getTime());
Fácil, ¿eh?
Enlaces de interés:
PD: El truco también sirve para forzar la carga de javascripts (js), hojas de estilo (CSS), etc…
English
17/12/2008 at 2:45 am Permalink
Hola Pau!
Te leo desde que te “hizo publicidad” Héctor en su twitter… (la de vueltas que dan las recomendaciones!).
Enhorabuena por el blog. Es estupendo. Tiene el nivel de detalle justo que lo hace interesante de leer. !Por fin un blog de programación que no es del estilo super-friki de “mira lo que pasa en el kernel de linux cuando cambio este flag”¡. Y también genial lo de “código manso”. Un nombre con gancho.
Estupendo el post. Muy curioso y muy útil. El “ejemplo ilustrativo” realmente ilustra
Un abrazo y buena suerte en todos tus proyectos!
Domingo.
17/12/2008 at 9:39 am Permalink
Hola Domingo!
La verdad es que intento tocar un poco de todo, aunque como últimamente me estoy orientando a la web, creo que la mayoría de artículos irán por ahí, eso si, siempre desde una perspectiva general. De todos modos, tengo algún que otro artículo en el horno, cuyo “target” es muy muy limitado.
Muchas gracias por el comentario!
Me alegra que te guste el blog
Un saludo!
17/12/2008 at 11:27 pm Permalink
classic trick! Últimamente hay tantas “caches” a tantos niveles en la red que da miedo
29/12/2008 at 3:40 pm Permalink
No es que sea mejor truco pero es frecuentemente usado y te evita tener que manejar contadores: usar el tiempo (fecha y hora).
Por ejemplo:
url = url + ‘?t=’ + (new Date()).getTime();
o incluso:
url = url + ‘?’ + (new Date()).getTime();
En el segundo caso el tiempo, en formato Unix, sería el nombre de la variable con valor null.
02/01/2009 at 12:12 pm Permalink
Ciertamente el truco de usar la fecha es probablemente el más utilizado.
El único inconveniente a nivel teórico, que no práctico, sería si se realizaran dos peticiones en el mismo milisegundo, pero vamos, no es algo que en la práctica vaya a ocurrir.
06/10/2009 at 3:21 pm Permalink
Excelente. Simplemente excelente.
04/02/2010 at 10:01 am Permalink
Excelente !!!! casi le doy la vuelta al mundo buscando la solucion para este problema!!! Gracias excelente truquito
27/05/2010 at 10:09 pm Permalink
La verdad es un trucazo!, me ayudo bastante!!…. es bueno mencionar que acerca de usar fechas en el querystring es muy sabio y definitivamente no tendria porque haber error pues, en ningun momento tendria porque repetirse tanto el horario como la fecha…
07/09/2010 at 1:44 am Permalink
Muchísimas gracias!!!! No tenía ni idea de cómo actualizar la imagen… Está muy bien el truquito!!!
26/11/2010 at 2:02 am Permalink
<img src='usuario/.jpg?nocache=’>
en PHP uso este truko.. si asi se le puede llamar
06/08/2011 at 12:54 pm Permalink
Excelente aporte, estaba teniendo dolores de cabeza con un problema similar. Salu2!
02/05/2012 at 9:10 am Permalink
Muchas gracias, excelente!!! muy bueno el truco lo necesitaba urgente