Foros del Web » Programando para Internet » Javascript »

Impedir el cache del navegador

Estas en el tema de Impedir el cache del navegador en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/07/2006, 18:43
 
Fecha de Ingreso: junio-2006
Mensajes: 11
Antigüedad: 17 años, 10 meses
Puntos: 0
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?
  #2 (permalink)  
Antiguo 03/07/2006, 07:34
 
Fecha de Ingreso: junio-2006
Ubicación: Valencia, Venezuela
Mensajes: 22
Antigüedad: 17 años, 10 meses
Puntos: 0
De acuerdo

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"
Refresco de imagen automático cada 4 segundos
asi puedes refrescar la imagen cada 4 segundos
setTimeout("refresco()",4000);
espero te funcione
  #3 (permalink)  
Antiguo 03/07/2006, 07:36
 
Fecha de Ingreso: junio-2006
Ubicación: Valencia, Venezuela
Mensajes: 22
Antigüedad: 17 años, 10 meses
Puntos: 0
De acuerdo 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;
}
El código hace lo siguiente: crea el objeto imagen al que se llama buffer y le asigna a su evento onload una función que copia la imagen cargada en el buffer a la imagen visible. Por otro lado, pone un temporizador que se ejecuta cada periodo segundos, y que llama a una función que comienza la carga de la nueva imagen en el buffer. Para que en cada ocasión que se ejecute cargue una imagen distinta empleamos el truquito que ya hemos visto, poniendo como parámetro el tiempo transcurrido desde el 1 de enero de 1970, lo que nos garantiza que cambie entre recargas.

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);
}
En el evento simplemente intentaríamos recargar de nuevo un segundo después, momento en el que suponemos que ya habrá terminado de subirse la nueva imagen por FTP. El código final y completo sería:
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> 
Espero q te sirva de Algo hasta luego...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 23:26.