jQuery는 IPCam의 jpeg 이미지를 가져옵니다.

jQuery의 초보자 인 Rzetterberg가이 게시물 webcam image refresh with ajax에서 확인해 보았 듯이 jQuery For Designer (J4D)에서 자습서를 읽었습니다.jQuery는 IPCam의 jpeg 이미지를 가져옵니다.

내 로컬 IP 카메라에서 가져 오는 이미지는 올바르게 표시되지만 기능을 새로로드 할 때마다 새로 가져온 이미지가 이전에 가져온 이미지 아래에 배치됩니다. 결과적으로 각 가져온 이미지가 서로 아래에 배치되는 페이지가 표시됩니다.

<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 컨테이너에 새로운 가져온 이미지를 배치해야한다는 것을 알고 있습니까?

출처

2012-01-13 BKS84

문제가 없으므로 devnull69의 대답에 동의 함을 표시하십시오. – dgvid

.append() 이미지를 div#ipcam에 위의 내용을 제거하지 않고 보내십시오. 시도해보십시오

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

출처

2012-01-13 12:14:53 devnull69

대단하군요! 그것은 작동합니다. – BKS84

setInterval() 대신 setTimeout()을 사용해야합니다.

setTimeout은 새로운 요청이 이루어지기 전에 이미지가 업데이트되도록합니다.

setInterval은 이전 요청이 아직 완료되지 않은 경우에도 새 요청을합니다. 요청이 잘못된 순서로 반환되면 표시 문제가 발생할 수 있습니다. 보이지 않을 수도있는 요청에 대해 시청자의 대역폭을 낭비 할 수 있으므로 효율성이 떨어집니다.

출처

2012-02-02 21:01:04

jQuery는 IPCam의 jpeg 이미지를 가져옵니다.

답변

관련 문제