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

回答

相关问题