jQuery从IPCam获取jpeg图像

As a beginner in jQuery I followed the tutorial at jQuery For Designers (J4D) as Rzetterberg has told to check it out in this post webcam image refresh with ajax.

作为jQuery的初学者,我遵循jQuery For Designers(J4D)的教程,因为Rzetterberg已经告诉要在这个帖子中用ajax刷新它。

The images I am getting from my local IPCamera are shown correctly but after each time the function reloads the new fetched image will be placed below the previous fetched image. As a result of this I get a page in which each fetched images are placed below each other.

我从本地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>

Does anyone know what I should do to place the new fetched image in the div container, called "ipcam", correctly?

有谁知道我应该怎么做才能将新获取的图像放在div容器中,称为“ipcam”,正确吗?

2 个解决方案

#1

You .append() the image to the div#ipcam without removing the previous content. Try this

你.append()图像到div #ipcam而不删除以前的内容。试试这个

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

#2

You should use setTimeout() instead of setInterval().

您应该使用setTimeout()而不是setInterval()。

setTimeout will ensure the image is updated before any new request is made.

setTimeout将确保在发出任何新请求之前更新映像。

setInterval will make new requests even if old ones haven't finished yet. This can lead to display issues if a request returns in the wrong order. It's also not very efficient, because it will waste the viewer's bandwidth on requests which may never be seen.

即使旧的请求还没有完成,setInterval也会发出新的请求。如果请求以错误的顺序返回,这可能会导致显示问题。它也不是很有效,因为它会浪费观众的带宽来应对可能永远不会看到的请求。

#1