Imagen de actualización automática

Tengo una image y quiero actualizarla automáticamente usando javascript, jquery o ajax.

Hasta ahora tengo el siguiente código.

<html> <head> <script language="JavaScript"><!-- function refreshIt() { if (!document.images) return; document.images['myCam'].src = 'swt.png'; setTimeout('refreshIt()',50); // refresh every 50ms } //--></script> </head> <body onLoad=" setTimeout('refreshIt()',50)"> <img src="swt.png" name="myCam"> </body> </html> 

Creo que no está funcionando porque el browser está almacenando en caching la image y no está actualizando la image correctamente.

¿Alguien puede proporcionarme un ejemplo de trabajo?

Esto hará el truco, pero es una pesadilla en cuanto a performance.

 <html> <head> <script language="JavaScript"> function refreshIt(element) { setTimeout(function() { element.src = element.src.split('?')[0] + '?' + new Date().getTime(); refreshIt(element); }, 50); // refresh every 50ms } </script> </head> <body> <img src="swt.png" name="myCam" onload="refreshIt(this)"> </body> </html> 

Simplemente agregue un número aleatorio a la cadena de consulta en cada actualización. Esto engañará al browser para que piense que se trata de un recurso diferente, mientras que el server ofrecerá la misma image.

Además de cargar una image diferente cada vez y boost el time de actualización, debe comenzar el setTimeout nuevamente después de que la image se haya cargado por completo.

 function refreshIt() { if (!document.images) return; var img = new Image(); img.src = 'swt.png'; // use a random image img.addEventListener('load', function () { // you should cache the image element document.images['myCam'].src = this.src; setTimeout(refreshIt, 50); // refresh every 50ms }, false); } } 

Está configurando el origen de la image en la misma cadena. Eso no refrescará la image, el browser cree que ya tiene esa image y no emitirá otra request. Intente agregar un parámetro de consulta aleatorio cada vez que desee actualizar; luego, el browser debería ver la image como resources diferentes.

Reemplace esta línea:

 document.images['myCam'].src = 'swt.png'; 

con:

 var date = new Date(); document.images['myCam'].src = 'swt.png?ts=' + date.getTime(); 

Esto generará un enlace diferente cada vez y la versión en caching de la img no se usará.

Y no actualice la image cada 50 ms. Eso es demasiado seguido.

Las soluciones en este hilo funcionarán, pero obligan al browser a download la image cada vez que se ejecuta la function. Esto searchá una nueva image sin downloadla realmente hasta que haya una nueva disponible. Este process debe dividirse en un Trabajador para un performance óptimo.

 <html> <head> <script language="JavaScript"> var lastModified; var reader; var http; function init() { http = new XMLHttpRequest(); http.onreadystatechange = function (e1) { if (this.readyState == 4 && this.status == 200) { reader = new FileReader(); reader.onloadend = function (e2) { if (this.readyState == 2) { var dataUrl = this.result; document.getElementById("image").src = dataUrl; } } reader.readAsDataURL(new Blob([http.response], {type: http.getResponseHeader("Content-Type")})); } } refresh(); } function refresh() { http.open("GET", "http://" + window.location.hostname + "/current", true); if (lastModified != null) http.setRequestHeader("If-Modified-Since", lastModified); http.responseType = "blob"; http.send(null); if (http.getResponseHeader("Last-Modified") != null) lastModified = http.getResponseHeader("Last-Modified"); setTimeout(refresh, 50); } </script> </head> <body onload="init()"> <img id="image" src=""> </body> </html>