Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Hacer que solo refresque una imagen y no la web entera en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/01/2013, 15:40
Avatar de Turbooo  
Fecha de Ingreso: enero-2013
Ubicación: Tierra
Mensajes: 48
Antigüedad: 11 años, 11 meses
Puntos: 0
Hacer que solo refresque una imagen y no la web entera

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

Última edición por Turbooo; 22/01/2013 a las 17:37
  #2 (permalink)  
Antiguo 23/01/2013, 04:44
Avatar de Turbooo  
Fecha de Ingreso: enero-2013
Ubicación: Tierra
Mensajes: 48
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: Hacer que solo refresque una imagen y no la web entera

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
  #3 (permalink)  
Antiguo 23/01/2013, 05:07
 
Fecha de Ingreso: noviembre-2011
Mensajes: 32
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Hacer que solo refresque una imagen y no la web entera

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.
  #4 (permalink)  
Antiguo 23/01/2013, 06:28
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Hacer que solo refresque una imagen y no la web entera

No es necesario un iframe, ni jQuery ni Ajax

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Mi Webcam</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. //<![CDATA[
  8. function actualizar(){
  9. var tiempo = new Date();
  10. var rnd =tiempo.getTime();
  11. var imagen = document.getElementById('webcam');
  12. imagen.src = 'webcam.jpg?'+rnd;
  13. }
  14. var t =setInterval('actualizar()', 5000); // 1000 = 1 segundo
  15. //]]>
  16.  
  17. </head>
  18. <img src="webcam.jpg" alt="webcam" title="webcam" width="320" height="240" id="webcam" />
  19. </body>
  20. </html>
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 23/01/2013, 07:33
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 12 años, 6 meses
Puntos: 127
Respuesta: Hacer que solo refresque una imagen y no la web entera

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.
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor
  #6 (permalink)  
Antiguo 23/01/2013, 07:53
Avatar de Turbooo  
Fecha de Ingreso: enero-2013
Ubicación: Tierra
Mensajes: 48
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: Hacer que solo refresque una imagen y no la web entera

Cita:
Iniciado por emprear Ver Mensaje
No es necesario un iframe, ni jQuery ni Ajax

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Mi Webcam</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript">
  7. //<![CDATA[
  8. function actualizar(){
  9. var tiempo = new Date();
  10. var rnd =tiempo.getTime();
  11. var imagen = document.getElementById('webcam');
  12. imagen.src = 'webcam.jpg?'+rnd;
  13. }
  14. var t =setInterval('actualizar()', 5000); // 1000 = 1 segundo
  15. //]]>
  16.  
  17. </head>
  18. <img src="webcam.jpg" alt="webcam" title="webcam" width="320" height="240" id="webcam" />
  19. </body>
  20. </html>
Saludos

Va de lujo!!! Muchas gracias
  #7 (permalink)  
Antiguo 23/01/2013, 12:07
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Hacer que solo refresque una imagen y no la web entera

Cita:
Iniciado por dontexplain Ver Mensaje
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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: baja, edición-de-video-y-audio
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




La zona horaria es GMT -6. Ahora son las 07:31.