jQuery從IPCam獲取jpeg圖像

作爲jQuery的初學者，我遵循jQuery For Designers（J4D）的教程，正如Rzetterberg所說的在webcam image refresh with ajax這篇文章中看到的。jQuery從IPCam獲取jpeg圖像

我從本地IPCamera獲取的圖像正確顯示，但在每次重新載入函數後，新獲取的圖像將放置在先前獲取的圖像下方。作爲這個的結果，我得到一個頁面，其中每個獲取的圖像被放置在彼此之下。

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function() { 
    var refreshId = setInterval(function() { 
    url = 'http://xxx.xxx.xxx.xxx?randval='; 
      var randval = Math.random(); 
      var img = new Image(); 
      $(img).load(function() { 
       $(this).hide(); 
       $('#ipcam').removeClass('loading').append(this); 
       $(this).show(); 
      }).error(function() { 
      // notify the user that the image could not be loaded 
      }).attr('src', url + randval);  
    }, 1000); 
    $.ajaxSetup({ cache: false }); 
}); 

</script> 
</head> 
<body id="page"> 
    <div id="ipcam" class="loading"> 
    </div> 
</body> 
</html>

有誰知道我應該怎麼做才能將新的圖像放在div容器中，名爲「ipcam」，正確嗎？

來源

2012-01-13 BKS84

既然它有效，請將devnull69的答案標記爲已接受。 – dgvid 2012-01-13 17:03:38

您將.append()圖片傳送到div#ipcam而不刪除以前的內容。試試這個

$('#ipcam').removeClass('loading').html("").append(this);

來源

2012-01-13 12:14:53 devnull69

這太棒了！有用。 – BKS84 2012-01-13 12:25:59

你應該使用setTimeout（）而不是setInterval（）。

setTimeout將確保在發出任何新請求之前更新圖像。

即使舊的請求尚未完成，setInterval也會發出新的請求。如果請求以錯誤的順序返回，這可能會導致顯示問題。這也不是很有效，因爲它會浪費觀看者的帶寬，而這些請求可能是永遠不會被看到的。

來源

2012-02-02 21:01:04

jQuery從IPCam獲取jpeg圖像

回答

相關問題