Question

作为jQuery的初学者，我按照jQuery For Designers（J4D）的教程进行了操作，正如Rzetterberg告诉我在这篇文章webcam image refresh with 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>

有没有人知道我应该怎样做才能将新获取的图像正确放入div容器中，名为“ipcam”？

Answer 1

您.append()将图片div#ipcam移至$('#ipcam').removeClass('loading').html("").append(this);而不删除之前的内容。试试这个

{{1}}

Answer 2

您应该使用setTimeout（）而不是setInterval（）。

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

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

jQuery从IPCam获取jpeg图像

2 个答案: