¿Cómo haría para actualizar una imagen que se actualiza en un servidor cada dos segundos sin que el usuario tenga que presionar el botón de actualización, mi primera suposición fue ajax pero realmente no he trabajado con ella antes. ¿Podría alguien señalarme en la dirección correcta?

EDITAR: Se olvidó de mencionar que la imagen es un .gif generado por un script perl - tratando de tomarlo por url devuelve un script

9
Mehran 28 jun. 2011 a las 20:40

6 respuestas

La mejor respuesta

Parece que hay algo mal con su script Perl. Intentar acceder a la imagen por la URL debería devolver una imagen de todos modos. Debería devolver datos binarios y no un script. También debe establecer el encabezado de tipo de contenido de la respuesta a image / gif. Verifique si realmente devuelve datos binarios antes de intentar corregir su código JavaScript.

3
fromvega 28 jun. 2011 a las 16:55

Hacer algo como

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

Esto cambia el atributo src de su etiqueta de imagen (con la identificación "yourimage") y le agrega una cadena de consulta aleatoria, obligando al navegador a recargar la imagen cada vez que la cambia.

Para volver a cargar la imagen cada 5 segundos, haga algo como:

window.setInterval(function()
{
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
}, 5000);
9
Steffen Müller 28 jun. 2011 a las 16:44

Cada X segundos envía Ajax al servidor. si enlace de imagen de respuesta == anterior, sin actualización, si enlace nuevo: $('img.class').attr('src','link');

0
bravedick 28 jun. 2011 a las 16:53

No es necesario AJAX, solo actualice la propiedad src de la imagen. Pero, dado que tiene la misma URL, debe darle al navegador una dirección única para asegurarse de que no solo cargue la imagen anterior de la memoria caché del navegador. Puede garantizar una imagen única al obtener el número de serie de la fecha actual a través de new Date().valueOf() y agregarlo a la url como una cadena de consulta.

$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());

También puede usar new Date().getTime() para obtener el número de serie, o simplemente forzar la fecha a un número: +new Date()

Para hacerlo en un temporizador use setInterval(). Este sería el código completo que podría colocar dentro de una etiqueta de script en el <head> de su página:

$(function() {
   var intervalMS = 5000; // 5 seconds
   setInterval(function() {
      $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
   }, intervalMS);
});
11
gilly3 10 abr. 2015 a las 19:41

Solo use javascript para actualizar la propiedad src del img.

Html:

<img src="..." id="myImage" />

Js:

document.getElementById("myImage").src = "http://....";

Si lo desea en un temporizador, haga algo como esto:

setInterval(function() { ... }, 4000);

Si tiene un problema con el almacenamiento en caché, agregue una cadena de consulta aleatoria al final de la URL: "? Rnd = randomNumberHere"

3
Steve 28 jun. 2011 a las 16:44

Agregarme un lapso de tiempo al final de la URL de la imagen funcionó para mí.

Var imagePath = "http: //localhost/dynamicimage.ashx";

$ ("# imgImage"). attr ("img", imagePath + & ts "+ (nueva Fecha ()), toString ());

1
Dulanjana Wickramatantri 30 nov. 2016 a las 06:21