자바 스크립트로 모든 이미지를 새로 고침 하시겠습니까?

네트워크상의 각 카메라에 대해 CCTV 서버에서 최신 이미지를로드하려고합니다.자바 스크립트로 모든 이미지를 새로 고침 하시겠습니까?

다음 코드는 올바르게 작동하고 이미지를 지속적으로 새로 고칩니다. 그러나 페이지의 최종 버전에는 페이지에 약 10 개의 카메라 이미지가 있습니다. 나는 내가 지금 가지고있는 코드가 특정 이미지가 아닌 모든 이미지를 리프레시하도록 변경 될 수 있는지 궁금했다.

처음에는 각 이미지에 대해 동일한 식별자를 사용할 수 있다고 생각했지만 각 이미지의 소스가 다른 것을 깨달았습니다.

<html> 
<head> 
<title>CCTV Test</title> 
<script type="text/javascript" language="JavaScript"> 
    newImage = new Image(); 

    function LoadNewImage() 
    { 
     var unique = new Date(); 
     document.images.ward.src = newImage.src; 
     newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime(); 
    } 

    function InitialImage() 
    { 
     var unique = new Date(); 
     newImage.onload = LoadNewImage; 
     newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime(); 
     document.images.ward.onload=""; 
    } 
</script> 
</head> 
<body> 
<img src="http://192.168.1.64/image/WARD" name="ward" onload="InitialImage()"> 
</body> 
</html>

모든 포인터가 감사하겠습니다! 이의 라인을 따라

출처

2012-09-04 dannymcc

'document.images' 목록을 반복하고 이미지를 새로 고칩니다. –

나는 JS에 완전히 익숙하다. 자습서 등에 대한 링크가있어, 제안에 따라 일을 반복하는 방법에 대해 좀 더 설명 할 수있다. 감사! – dannymcc

다음과 같이 '$ ("img"). 각 (function() { console.log ($ (this) .prop ("src")); }); – dannymcc

뭔가 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>CCTV Test</title> 
</head> 
<body> 
    <img src="http://192.168.1.64/image/WARD?time=..."> 
    <img src="http://192.168.1.64/image/WARD?time=..."> 
    etc. 
    <script> 
    setInterval(function() { 
     var images = document.images; 
     for (var i=0; i<images.length; i++) { 
      images[i].src = images[i].src.replace(/\btime=[^&]*/, 'time=' + new Date().getTime()); 
     } 
    }, 10000); // 10000 milliseconds = 10 seconds 
    </script> 
</body> 
</html>

이 모든 이미지를 10 초마다 새로 고쳐집니다.

다른 접근 방식은 이미지의 위치를 배열에 저장하는 것입니다.

출처

2012-09-04 09:04:55

완벽하게 작동합니다. 감사합니다 !! – dannymcc

이미지가 'Cache-control : no-cache' 헤더, BTW로 제공되는지 확인하십시오. 그렇지 않으면 브라우저 캐시가 1000 개가 넘는 CCTV 프레임으로 가득 채워지 게됩니다. 당신은 당신이 사용하고있는 서버를 말하지 않았지만, 아파치에서는 서버 설정에서, 또는 .htaccess 파일을 사용하여 이것을 할 수 있습니다. – Doin

자바 스크립트로 모든 이미지를 새로 고침 하시겠습니까?

답변

관련 문제