2

まず第一に、<iframe>ちらつきのない を更新する方法に関する私の質問であっても、私の問題を解決する他の提案は大歓迎です。

問題:「メイン」html ページを公開するサーバーがあります。その間、写真を撮り (たとえば、1 秒に 1 枚)、HDD に保存します。写真をWebページに表示してリフレッシュしたい。

見つかった解決策:スコープを使用して<iframe></iframe>、画像のみを含む別のページを配置しました。次に、この 2 番目のページが定期的に更新されます。そのため、ページ全体は更新されず、画像フレームのみが更新されます。問題は、このソリューションが更新されるたびにちらつきが発生することです。

これがメインページのコードです (少し圧縮されています):

<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">

<!-- RIGHT HERE! -->
<iframe src="image.html" width="640" height="480" frameborder="0"></iframe>

</td></tr></table>
</body></html>

2 番目の Web ページは次のようになります。

<!DOCTYPE html><html><head>
<script type="text/javascript">
<!--
function f( t )
{
    setTimeout( "location.reload( true );", t );
}
-->
</script>
</head>
<body bgcolor="#000000" onload="JavaScript:f( 1000 );">
<img src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</body>
</html>

私は JavaScript の初心者なので、このコードが優れているとは思いません。お気軽にアドバイスをください。

さて、ちらつきなくリロードできるでしょうか？ページが完全にロードされていないときにちらつきが発生することを読みました。また、読み込み時に非表示のフレームがオン/オフされることなどについても読みましたが、良い解決策が見つかりません。

また、AJAX のような技術がいくつか存在することは知っていますが、それ以上のことは知りません。必要に応じて、それらを使用するように提案してください。すぐに学ぶことができます...

編集 1:ほとんどの Android ブラウザーは、私の例のように相対的な画像サイズをサポートしていません。絶対ピクセル値を使用します。

4

1 に答える 1

5

iframe をリロードすると、常にちらつきます。ただし、これにはajaxも必要ありません。タイマーとキャッシュを回避するためのトリックだけです。

<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">

<div>
    <img id="theimg" src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</div>

</td></tr></table>

<script type="text/javascript">
var theimg = document.getElementById("theimg");
var theurl = "../images/myimage.png";
setInterval(function() {
    theimg.src = theurl + '?t=' + new Date().getTime();
}, 1000);
</script>
</body></html>
于 2013-11-12T03:02:26.130 に答える