7

Web ページに img タグがあります。画像を取得して表示する場所から IP カメラの URL を指定します。完全にロードされたときに画像を表示したい。ちらつきを避けることができるように。私は次のことをします。

<img id="stream"
  width="1280" height="720" 
  alt="Press reload if no video displays" 
  border="0" style="cursor:crosshair; border:medium; border:thick" />

<button type="button" id="btnStartLive" onclick="onStartLiveBtnClick()">Start Live</button>

JavaScriptコード

function LoadImage()
{
  x = document.getElementById("stream");    
  x.src = "http://IP:PORT/jpg/image.jpg" + "?" + escape(new Date());
}

function onStartLiveBtnClick()
{       
  intervalID = setInterval(LoadImage, 0);
}

このコードで。画像が大きい場合。読み込みに時間がかかります。その間、ロードされた画像の一部が表示され始めます。全体画像を表示して読み込み部分を飛ばしたい ありがとう

4

2 に答える 2

23

<img />イメージをプリロードし、イメージのロードが完了したらソースを置き換えます。

function LoadImage() {
    var img = new Image(),
        x = document.getElementById("stream");

    img.onload = function() {
        x.src = img.src;
    };

    img.src = "http://IP:PORT/jpg/image.jpg" + "?_=" + (+new Date());
}
于 2013-01-17T07:05:35.210 に答える
1

プロパティを使用してcomplete、画像の読み込みが完了したかどうかを確認できます。ただし、コードには他にも問題があると思います。主に、同じ画像を繰り返し読み込んでいます。代わりに、一度だけロードしてからcomplete、一定間隔でプロパティをチェックする必要があります。

このようなものが動作するはずです:

function LoadImage()
{
  x = document.getElementById("stream");    
  x.src = "http://IP:PORT/jpg/image.jpg" + "?" + escape(new Date());
  x.style.visibility = 'hidden';
}

function CheckIsLoaded() {
  x = document.getElementById("stream");    
  if (x.complete) x.style.visibility = 'visible';
}

function onStartLiveBtnClick()
{       
  LoadImage();
  intervalID = setInterval(CheckIsLoaded, 0);
}
于 2013-01-17T06:59:59.430 に答える