自动更新图片

我有一个图像，我想用javascript，jquery或ajax自动更新它。自动更新图片

直到现在我有以下代码。

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

我认为这是行不通的，因为浏览器正在缓存图像，它没有正确更新图像。

有人能给我一个工作的例子吗？

来源

2011-12-10 glarkou

你*认为*它不工作....？发生了什么呢？ –

每秒刷新20次？我可能是错的，但我没有看到在浏览器中运行良好？ – Murph

P.S.你也可以使用：'setTimeout（refreshIt，50）'，对我来说很好。（但是，50毫秒？没有太多的请求？） –

这会做到这一点，但就性能而言这是一场噩梦。

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

来源

2011-12-10 21:21:54 benastan

只需在每次刷新时向查询字符串添加一个随机数。这会诱使浏览器认为这是一种不同的资源，而服务器将提供相同的图片。

来源

2011-12-10 21:11:17

当你在它的时候，50毫秒可能太频繁刷新间隔。 – Jacob

您正在将图像源设置为相同的字符串。这不会刷新图像，浏览器认为它已经具有该图像，并且不会发出另一个请求。尝试在每次刷新时添加一个随机查询参数 - 然后浏览器应该将图像看作不同的资源。

来源

2011-12-10 21:12:33 driis

替换此行：

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

有：

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

这将产生不同的链接每次和IMG的缓存版本将不会被使用。

而且不要每隔50ms刷新一次图像。这太频繁了。

来源

2011-12-10 21:14:38 kubetz

除了每次加载不同的图像并增加刷新时间之外，应在图像完全加载后再次启动setTimeout。

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); 
    } 

}

来源

2011-12-10 21:21:05 Trevor

此线程中的解决方案将工作，但它们会强制浏览器在每次运行该函数时下载映像。这将在没有实际下载的情况下检查新的图像，直到有新的图像可用。这个过程应该分解为一个工作者以获得最佳性能。

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

来源

2015-03-07 02:18:03 thunderfroggum

自动更新图片

回答

相关问题