| |||
Impedir el cache del navegador Hola tengo una seccion de noticias en donde puedo subir una foto, todo funciona bien hasta que visualizo la foto que subi al servidor. El problema es que solo se ve la antigua foto y no la nueva, esto se soluciona dandole refresh al internet explorer pero no es la idea. Alguien me dijo que la mejor solucion era recargar la imagen con javascript... pero no me dijo cual era el codigo... alguien sabe cual es...o como se hace? |
| |||
Se introduce este script entre la cabecera (head) y el cuerpo de la web (body):
Código:
<script language="JavaScript"> var archivo = 'file.jpg'; function fecha() { var date = new Date(); return date.getTime(); } function refresco() { var fcontrol = fecha() ; document.images.image.src=archivo+'?pcw='+fcontrol; setTimeout("refresco()",4000); }</script> En el cuerpo se introduce una imagen junto al siguiente código: Código HTML: img name="image" src="file.jpg" border="1" vspace="5" width="320" height="240" asi puedes refrescar la imagen cada 4 segundos setTimeout("refresco()",4000); espero te funcione |
| |||
Una Explicación mas extendida Normalmente, cuando ponemos imágenes de nuestra webcam, empleamos un programa para subir una imagen cada minuto o medio minuto por FTP. Si no tenemos ninguno hay varias opciones gratuitas para realizar esta labor, como Dorgem, Fwink o Cam Commander. El problema es lograr que el navegador no almacene la primera imagen en la caché y que la recargue periódicamente sin emplear nada más que HTML y Javascript. Evitar la caché El truco para evitar la caché es de esas cosas que no se te ocurren y que, cuando te lo dicen, exclamas: ¡anda, pues claro! ¡Seré idiota! O al menos yo me lo dije a mi mismo cuando leí como hacerlo. El truco consiste en que, puesto que el navegador guarda en la caché la imagen con un nombre determinado, lo mejor es que cada vez que queramos recargarla la pongamos un nombre distinto. Como no es cosa de estar subiendo la imagen cada pocos segundos con un nombre distinto y actualizando a su vez el HTML, lo que haremos será emplear los parámetros que se admiten en cualquier URL. Así pues, la siguiente imagen: <IMG SRC="webcam.jpg?d=1298632">Será distinta para la caché del navegador que: <IMG SRC="webcam.jpg?d=1097652">Sin embargo, en ambas ocasiones estaremos cargando la imagen webcam.jpg. Recargar la imagen Lo siguiente que debemos hacer es recargar la imagen cada cierto tiempo. Para ello, lo primero que debemos hacer es ponerle a la imagen un nombre significativo: <img name="webcam" src="webcam.jpg"> Luego, crearemos un objeto imagen que leerá la nueva toma de nuestra cámara web y, cuando haya terminado, la cambiará por la antigua. Si no lo hacemos así, en lugar de ver como una imagen sustituye a la otra de forma inmediata, veremos como queda el recuadro en blanco y finalmente se recarga la nueva, línea a línea. Código HTML: periodo = 60; // segundos entre recargas imgsrc = document.webcam.src; buffer = new Image(); buffer.onload = imageChange; setTimeout("imageReload()", periodo * 1000); function imageReload() { buffer.src = imgsrc + "?d=" + new Date().getTime(); setTimeout("imageReload()", periodo * 1000); } function imageChange() { document.webcam.src = buffer.src; } Evitando errores Este sistema está bien, pero tiene un pequeño problema. ¿Y si el usuario intenta recargar la imagen mientras la estamos subiendo. En tal caso dará error, no se ejecutará el evento onload porque no se cargará la imagen, y por tanto el temporizador se parará. Para evitarlo, emplearemos un controlador del evento onerror. Código HTML: buffer.onerror = imageError; function imageError() { setTimeout("imageReload()", 1000); } Código HTML: <html> <head> <title>Mi webcam</title> <script language="JavaScript"><!-- periodo = 60; imgsrc = document.webcam.src; buffer = new Image(); buffer.onload = imageChange; buffer.onerror = imageError; setTimeout("imageReload()", periodo * 1000); function imageReload() { buffer.src = imgsrc + "?d=" + new Date().getTime(); setTimeout("imageReload()", periodo * 1000); } function imageChange() { document.webcam.src = buffer.src; } function imageError() { setTimeout("imageReload()", 1000); } // --></script> </head> <body> <img name="webcam" src="webcam.jpg" width="320" height="240" border="0"> </body> </html> |