[SOLUCIONADO] Hacer que solo refresque una imagen y no la web entera

Turbooo · #1 (**permalink**) 22/01/2013, 15:40

Hola !!!

Soy el ultimo pepinillo de este foro y empiezo preguntado una duda en la que llevo bastante tiempo buscando una solución.

Tengo una web con una webcam online, no uso streming ya que me cuesta una pasta el hosting y aparte el que tengo no me lo permite. Asi que la hice de la forma antigua, osea un programilla capta una imagen con la cámara y la sube por FTP al servidor cada 60 segundos.
Bien en la web si no le das a F5 no verás la última imagen captada, asi que he estado buscando algun script o algo parecido que me actualize la página sola, y si lo hay!!!! pero yo quiero que solo se actualize la imagen.

Acabo de hacer una cosa...
He creado una página l"webcam.html" aparte con la imagen de la webcam para se refresque sola cada 60 seg y le he añadido esto

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Webcam online playa El Balneario - Tarifa</title>

</head>

<body onload="setInterval('location.reload()',60000)">

<img name="webcam" src="/webcam/webcam.jpg" width="640" height="480" border="0">


</body>
</html>

y luego en la página real de la webcam he puesto el iframe así

Código:

<iframe src="/webcam/webcam.html" width=650 height=500 frameborder=1 scrolling=auto></iframe>

Y no me funciona!!!!!

Para que funcione tiene q estar abierta en mi navegador la de la webcam, osea la "webcam.html", asi si!! pero si esta cerrada no se actualiza en la que tengo el iframe.

Me habeis entendido!!!

Espero que si!!!

Que quiero?? Pues un script que este en la misma página de la webcam y que haga que solo se actualice la imagen captada cada x tiempo, y no se vea el trás curso que hace la imagen al recargarse bajando una y entrando otra.

>Ufffff q dificil os lo he puesto!!!!

Un saludo

Turbooo · #2 (**permalink**) 23/01/2013, 04:44

Bueno pues lo que hice con el iframe si me funciona!!!

Hoy por la mañana lo he comprobado!!

Aun así me gustaria que alguien me dijera algún script para hacer eso de solo refrescar solo una imagen y no la web entera!!

Gracias de antemano lo estaré muy agradecido

b0rr3g0 · #3 (**permalink**) 23/01/2013, 05:07

Hola turbo, la forma de hacer lo que quieres es mediante JQuery y Ajax.

Busca por ahí poque hay muchas formas de hacerlo.

Lo que tendrías que hacer mas o menos es capturar el evento (la imagen) con JQuery y con Ajax vas borrando la imagen anterior y cargando la nueva.

Saludos.

emprear · #4 (**permalink**) 23/01/2013, 06:28

No es necesario un iframe, ni jQuery ni Ajax

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mi Webcam</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function actualizar(){
var tiempo = new Date();
var rnd =tiempo.getTime();
var imagen = document.getElementById('webcam');
imagen.src = 'webcam.jpg?'+rnd;
}
var t =setInterval('actualizar()', 5000); // 1000 = 1 segundo
//]]>
</script>
 
</head>
<body>
<img src="webcam.jpg" alt="webcam" title="webcam" width="320" height="240" id="webcam" />
</body>
</html>

Saludos

dontexplain · #5 (**permalink**) 23/01/2013, 07:33

Si añades al final de la URL de la imagen un parámetro el navegador la recarga nuevamente ya que en la caché no contiene la dirección absoluta primitiva de la imagen actual, ergo, considera que no es el mismo recurso ya cacheado.

imagen.jpg?asd=234234

Generalmente el número es el timestamp o cualquier otra cadena aleatoria.

Turbooo · #6 (**permalink**) 23/01/2013, 07:53

Cita:

Iniciado por emprear

No es necesario un iframe, ni jQuery ni Ajax

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mi Webcam</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function actualizar(){
var tiempo = new Date();
var rnd =tiempo.getTime();
var imagen = document.getElementById('webcam');
imagen.src = 'webcam.jpg?'+rnd;
}
var t =setInterval('actualizar()', 5000); // 1000 = 1 segundo
//]]>
</script>
 
</head>
<body>
<img src="webcam.jpg" alt="webcam" title="webcam" width="320" height="240" id="webcam" />
</body>
</html>

Saludos

Va de lujo!!! Muchas gracias

emprear · #7 (**permalink**) 23/01/2013, 12:07

Cita:

Iniciado por dontexplain

Si añades al final de la URL de la imagen un parámetro el navegador la recarga nuevamente ya que en la caché no contiene la dirección absoluta primitiva de la imagen actual, ergo, considera que no es el mismo recurso ya cacheado.

imagen.jpg?asd=234234

Generalmente el número es el timestamp o cualquier otra cadena aleatoria.

var rnd =tiempo.getTime();

@Turbooo, de nada, si la solución te fue satisfactoria, busca el botón "marcar tema como solucionado" (tambien se puede acceder desde el menú "herramientas" en la parte superior de la página), que es solo visible a los autores de los posts. Es una herramienta bastante reciente de FDW y sería bueno que la empecemos a implementar
Saludos