Actualizando una imagen sin página recargo

¿Cómo puedo 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 eso antes ¿Podría alguien señalarme en la dirección correcta?Actualizando una imagen sin página recargo

EDIT: He olvidado mencionar que la imagen es una .gif generada por un script Perl - tratando de agarrarlo por la URL de devolución de un script

Fuente

2011-06-28 Mehran

Usted dice" tratando de agarrarlo por url return a script ", pero implica que actualmente puede volver a cargar el imagen al actualizar la página. Por lo tanto, debe haber una url que recupere la imagen. ¿Podría editar su pregunta para incluir el html de la etiqueta img que encuentre al ver la fuente? – gilly3

@ gilly3 no existe una fuente de página toda la página es simplemente una imagen que se genera mediante un script de Perl, por lo tanto, no hay etiqueta de img, no hay html. Quería tomar esa imagen para ponerla en una página web y actualizarla para actualizar la imagen que se genera a partir del guión de perl. – Mehran

Parece que hay algo mal con su script de Perl. Intentar acceder a la imagen mediante 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 Content-type de la respuesta a image/gif. Verifique si realmente devuelve datos binarios antes de tratar de corregir su código JavaScript.

Fuente

2011-06-28 16:55:56 fromvega

Muchas gracias fue el guión. – Mehran

sólo tiene que utilizar javascript para actualizar la propiedad src del img.

HTML:

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

JS:

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

Si quieres que en un temporizador, hacer algo como esto:

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

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

Fuente

2011-06-28 16:44:02 Steve

hacer algo como

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

Esto cambia el atributo src de la etiqueta de la imagen (con id "yourimage") y añade una cadena de consulta aleatoria a ella, forzando al navegador para recargar la imagen cada vez que se cambie.

para recargar la imagen cada 5 segundos, hacer algo como:

segundos

 
window.setInterval(function() 
{ 
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime(); 
}, 5000);

Fuente

2011-06-28 16:44:58

cada X envían Ajax al servidor. si el enlace de la imagen de la respuesta == anterior, no hay actualización, si el enlace es nuevo: $('img.class').attr('src','link');

Fuente

2011-06-28 16:47:18 bravedick

No es necesario AJAX, solo actualice la propiedad src de la imagen. Pero, dado que tiene la misma url, debes darle al navegador una dirección única para asegurarte de que no solo cargues la imagen anterior desde el caché del navegador. Puede garantizar una imagen única obteniendo el número de serie de la fecha actual a través del new Date().valueOf() y adjuntándolo a la url como una cadena de consulta.

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

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

que hacerlo en un uso temporizador setInterval(). Este sería el código completo que se puede apenas caer dentro de una etiqueta de secuencia de comandos en <head> su página:

$(function() { 
    var intervalMS = 5000; // 5 seconds 
    setInterval(function() { 
     $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date()); 
    }, intervalMS); 
});

Fuente

2011-06-28 16:57:16 gilly3

Adición de un lapso de tiempo hasta el final de la imagen URL trabajó para mí.

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

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

Fuente

2016-11-30 06:21:40

Actualizando una imagen sin página recargo

Respuesta

Cuestiones relacionadas