完全に利用可能な場合にのみ毎秒イメージをリフレッシュする

Question

私はいくつかの問題に遭遇しています。私はhttpを介してライブ画像をgrapし、私のウェブサーバに保存したい。 JavaScriptを使用して、毎秒保存されたイメージをリフレッシュしています。しかし、JavaScriptがリフレッシュされ、画像が完全に保存されていない場合、私は半画像（完全に読み込まれた画像ではない）しか見ません。

これを処理する方法はありますか？例えば。保存タスクが完了したときにのみイメージを表示しますか？新しい "キャッシュされた"イメージが表示されるまで表示されない場合

ソースからの画像にアクセスするために私のPHPファイル：

$path = realpath(dirname(__FILE__)); 
for ($i = 0; $i < 59; ++$i) { 
    copy('http://<<<IP>>>/livepicture.jpg', $path.'/livepicture.jpg'); 
    sleep(1); 
} 

私のhtmlファイルイメージをリフレッシュ：

<script language="javascript" type="text/javascript" > 
function ChangeMedia(){ 
    var d = new Date(); 
    var t = d.getTime(); 
    document.getElementById('camara').src = "livepicture.jpg?"+t; 
} 
var reloadcam = setInterval("ChangeMedia()",1000); 
</script> 
<img src="livepicture.jpg" alt="Loading..." name="camara" id="camara" /> 

Answer 1

イメージファイルをコピーするには、イメージファイルをダウンロードした後にのみ、前のファイルを置き換える必要があります。

$path = realpath(dirname(__FILE__)); 
for ($i = 0; $i < 59; ++$i) { 
    copy('http://<<<IP>>>/livepicture.jpg', $path.'/temp.jpg'); 
    rename($path.'/temp.jpg', $path.'/livepicture.jpg'); 
    sleep(1); 
} 

Answer 2

あなたは、AJAX requetや画像のonloadのイベントとするとき、あなたのPHPで試すことができます応答が良いページを更新する