2

リモート システムからリアルタイム データ画像をストリーミングし、それらを Web サイトに表示する Web サイトを作成しています。これらのイメージはリモート サイトで 5 秒ごとに変更されるため、これらのイメージは自動的に再読み込み/更新されます。 問題: IE と chrome では画像の更新が正しくスムーズに行われますが、Firefox では自動更新のたびにちらつきが発生します。これは望ましくない動作です。これを修正するにはどうすればよいですか? PS私は必要なjavascriptを埋め込むjoomlaの記事を使用しています

     <center>  
     <img id="pic" src="images/CB1.jpeg" border="0" width="700" height="700"/></center>
     <script language="javascript" type = "text/javascript">
      function refresh() 
       {         
      document.images["pic"].src = "images/CB1.jpeg" + "?" + new Date().getTime();
       }
      window.onload=function(){
      setInterval(function(){refresh()}, 5000 ); 
      }
     </script>

これは joomla の記事に埋め込まれたスクリプトです。画像は300～350KB程度です。

4

1 に答える 1

2

お使いのマシンでテストできなければ、はっきりとは言えませんが、Cobra_Fastは、画像の読み込みが完了する前にレンダリングされているという点で正しいと思います。これを回避するには、新しい画像の読み込みが完了するまで、古い画像を置き換えないようにしてください。これは機能するはずです：

<img id="pic" src="images/CB1.jpeg">

<script language="javascript" type = "text/javascript">
function refresh() {
    // create new image obj
    var image = new Image();

    // replace the existing image once the new image has loaded
    image.onload = function () {
        document.images["pic"].src = image.src;
    }

    // set the source of the new image to trigger the load 
    image.src = "images/CB1.jpeg" + "?" + new Date().getTime();
}

window.onload=function(){
    setInterval(function(){refresh()}, 5000 ); 
}
</script>
于 2013-02-05T15:42:30.653 に答える