自動更新圖片

我有一個圖像，我想用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

自動更新圖片

回答

相關問題