2017-11-16 6 views
0

* .pngファイルを表示して定期的に更新する小さな* .htmlファイルがあります。 リロード中に点滅するのを防ぐために、コード内にイメージをプリロードします。Javascriptイメージのリフレッシュ(プリロード、読み込み問題あり)

一部のリフレッシュ中(ランダムなように見える)、イメージは部分的にしか表示されません(下部の白い部分が1/2から1/3)ので、読み込みが完了するまでに時間がかかります。

どうすればこの問題を防ぐことができますか?

index.htmlを

<html> 
<body onload="update();"> 
    <script src="update.js"></script> 
    <div id="container">  
     <img id="img_display" src="my_image.png"/> 
    </div> 
</html> 

update.js update.js

/*代わりに*/

function update() { update_image(); setTimeout("update();", 1000); }

/*利用で

function update() { 
    update_image(); 
    setTimeout(update, 1000); 
} 

function update_image() { 
    //timestamp as random identifier 
    var timestamp = new Date().getTime(); 
    //create image path, appending timestamp to force reload of image instead of using chached version 
    var s_src = "my_image.png?random=" + timestamp; 
    // preload image to prevent flashing 
    var img = new Image(); 
    img.src = s_src; 
    // get img container ID 
    var s_id = "img_display"; 
    // refresh source parameter 
    document.getElementById(s_id).src = s_src; 
} 
+2

あなたの '' とあなたの 'update_image'機能は、余分な終了'} 'ブレースを持って、あなたは一貫性なくセミコロンを使用しています。また、 'setTimeout'に文字列を使う必要はありません。' setTimeout(update_image、1000); '関数に直接名前を付けることができます。 – Dai

+0

真実、あまりにも速い大きな文脈からコピーされた混乱のために申し訳ありません。すべてのエラーが修正されました – HeXor

答えて

0

*/

function update() { setTimeout(function(){ update_image(); }, 1000); }

+0

大きな違いは何ですか?どのようにこれは私の状況を変えますか?プリロードを直接扱っていないからです。 – HeXor

+0

実際には動作していません。一度しか更新されません。 – HeXor

+0

function update(){ update_image(); setTimeout(update、1000); } このコードは、関数を再帰的に呼び出し、setTimeout間隔を無限にトリガーします。結果として、更新機能のpower(n、n)回を呼び出し、パフォーマンスが低下します。 function update(){ setTimeout(function(){update_image();}、1000); } –

関連する問題