Actualización automática Imagen

Tengo una imagen y quiero actualizarla automáticamente mediante javascript, jquery o ajax.Actualización automática Imagen

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 navegador está almacenando en caché la imagen y no está actualizando la imagen correctamente.

¿Alguien puede darme un ejemplo de trabajo?

Fuente

2011-12-10 glarkou

You * think * it not not working ....? ¿Qué está pasando en su lugar? –

¿Renovar 20 veces por segundo? Podría estar equivocado, pero no veo que funcione bien en un navegador. – Murph

P.S. usted también usa: 'setTimeout (refreshIt, 50)', me parece bien. (¿Pero sí, 50 ms? ¿No hay demasiadas solicitudes?) –

esto va a hacer el truco, pero es una pesadilla en cuanto a rendimiento.

<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>

Fuente

2011-12-10 21:21:54 benastan

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

Fuente

2011-12-10 21:11:17

Y mientras lo hace, 50 ms es probablemente demasiado frecuente como un intervalo de actualización. – Jacob

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

Fuente

2011-12-10 21:12:33 driis

Reemplazar 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á diferentes enlace no serán utilizados cada vez y la versión en caché de la img.

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

Fuente

2011-12-10 21:14:38 kubetz

Además de cargar una imagen diferente cada vez y aumentar el tiempo de actualización, debe iniciar el setTimeout nuevamente después de que la imagen 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); 
    } 

}

Fuente

2011-12-10 21:21:05 Trevor

Las soluciones en este hilo funcionarán, pero obligan al navegador a descargar la imagen cada vez que se ejecuta la función. Esto buscará una nueva imagen sin descargarla realmente hasta que haya una nueva disponible. Este proceso debe dividirse en un Trabajador para un rendimiento ó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>

Fuente

2015-03-07 02:18:03 thunderfroggum

Respuesta

Cuestiones relacionadas