* .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;
}
あなたの '' とあなたの 'update_image'機能は、余分な終了'} 'ブレースを持って、あなたは一貫性なくセミコロンを使用しています。また、 'setTimeout'に文字列を使う必要はありません。' setTimeout(update_image、1000); '関数に直接名前を付けることができます。 – Dai
真実、あまりにも速い大きな文脈からコピーされた混乱のために申し訳ありません。すべてのエラーが修正されました – HeXor