2

作为 jQuery 的初学者，我遵循了 jQuery For Designers (J4D) 上的教程，正如 Rzetterberg 所说，在这篇使用 ajax 进行网络摄像头图像刷新的帖子中查看它。

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

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

4

2 回答 2

1

您.append()将图像移至div#ipcam不删除以前的内容。尝试这个

$('#ipcam').removeClass('loading').html("").append(this);
于 2012-01-13T12:14:53.700 回答
0

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

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

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

于 2012-02-02T21:01:04.683 回答