2

ネットワーク上の各カメラについて、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>

任意のポインタをいただければ幸いです！

4

1 に答える 1

4

これに沿った何か：

<!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-04T09:04:55.740 に答える