Q&A
何をどう更新する想定なのでしょうか？
ページ全体を更新する、のであれば画像の更新によるチラつきはやむなしです。
ある要素のみを更新したい、のであれば、その要素の中身のみを更新する、とすれば、他の画像などはチラつかないと思いますが。
なので、更新したい要素や、内容を提示して下さい。
（ajaxで取得してる内容があり、この要素内に展開したい、など）
前提・実現したいこと
特定のURL（画像のみのページ）を1分毎に更新するという挙動をHTMLで実現していますが、ブラウザの更新時に画像を再読み込みするタイミングで一瞬画面が白くなってしまいます。（画像を読み込み完了するまでの間）
ページ内の画像をすべて読み込み完了した後に画像を表示する等を実現することで、一瞬画面が白くなることなくシームレスに画像の差し替えを実現したいと思います。
初心者のため、可能な限りシンプルなコードで実現できると大変有難いです。
どうぞよろしくお願いいたします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!doctype html> <style type="text/css"> <!-- #center{ background-color:rgba(255,255,255,1); margin-top:-0px; margin-left:-0px; } --> </style> <html> <meta http-equiv="refresh" content="60" > <head> <title>test</title> </head> <body> <p><img src="http://info-dam.hdb.hkd.mlit.go.jp/images/camera/19600103.jpg" alt="" scrolling="no" id="center"></p> <script type="text/javascript"> setTimeout("location.reload(false)",60000); </script> </body> </html>
試したこと
①location.reload(false)にfalseを追加し、画像が更新されていない場合はキャッシュから画像を取得するようにしました。
②以下のURLでフェードする方法も見ましたが、もう少し簡単に実現できないかと思っています。
https://digipress.info/tech/page-transition-effect-how-to/
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
上記ソース内のimg src="http://info-dam.hdb.hkd.mlit.go.jp/images/camera/19600103.jpg"の画像は定期的に更新されるのですが、それをソース内のHTMLで読み込みリロードすることで最新の画像を取得しています。
この画像がシームレスに読み込みできれば良く、ページ全体である必要はありません。（私のスキルでは上のソースのようなリロードしかできませんでしたが、もっと良い方法があれば。。）
お手数をおかけしますがどうぞよろしくお願い致します。
なるほど。
あと、HTMLの文法間違ってるので、そこは修正しましょう。
<html>の外側に<style>は文法違反ですし、<meta>も含め、<head>要素内に記述が正しいです。
また、スタイル内容を<!-- -->で囲うのは、二十年前の書き方です。
あと、
> 初心者のため、可能な限りシンプルなコードで実現できると大変有難いです。
こういった、お願いします系の書き方だと、やりたいことを書いただけの丸投げ質問と思われるので、
止めることをお勧めします。
サンプルソースありがとうございます。
以下URLに更新間隔１０秒で反映してみたのですが、最初の１回だけ１０秒後に更新されたように見えるのですが、それ以降更新されないように見えます。（また、最初の更新で画像が下にずれてしまうように見えます。。）何が足りないのでしょうか？
http://blngs.net/typhoon_niigata.htm
画像が下にずれるのはスタイルでご自身で調整してください。
あと、回答に関してのコメントは、回答のコメント欄にてお願いします。
回答1件
0
ベストアンサー
html
1<!doctype html> 2<html> 3<head> 4<title>test</title> 5<!-- メタでのリフレッシュ（更新）はスパムとして扱われる可能性があるのでやめましょう --> 6<style> 7/* 汎用的に扱えるようにするために、クラスにします */ 8.center{ 9 background-color: rgba(255,255,255,1); 10 /* 下記は意味ないのでやめましょう 11 margin-top:-0px; 12 margin-left:-0px; 13 */ 14} 15.backImage { 16 left: 0; 17 position: absolute; 18 top: 0; 19 z-index: -1; 20} 21 22#imageWrapper { 23 display: inline-block; 24 position: relative; 25 z-index: 1; 26} 27</style> 28</head> 29<body> 30<!-- img要素にscrolling属性は使えません --> 31<p><span id="imageWrapper"> 32 <img src="http://info-dam.hdb.hkd.mlit.go.jp/images/camera/19600103.jpg" alt="" class="center"> 33</span></p> 34 35<script> 36const wrapper = document.getElementById('imageWrapper'); 37const imagePath = 'http://info-dam.hdb.hkd.mlit.go.jp/images/camera/19600103.jpg'; 38setInterval(() => { 39 const newImage = new Image(); 40 // パラメータをつけて、常に新しいものを取得するように修正 41 newImage.src = imagePath + '?' + (new Date()).getTime(); 42 newImage.classList.add('backImage'); 43 newImage.classList.add('center'); 44 wrapper.appendChild(newImage); 45 newImage.onload = function(){ 46 setTimeout(() => { 47 wrapper.querySelector('.center').remove(); 48 this.classList.remove('.backImage'); 49 }, 500); 50 }; 51}, 60000); 52</script> 53</body>
投稿2020/06/21 01:24
編集2020/06/23 15:45総合スコア9528
考え方的には、更新画像を、いったん下に重ねて、
上の画像を消去するってやりかたです。
画像の挿入タイミングを修正してみたので、試してみてください。
どうもありがとうございます。
ただ、やはり最初の１回だけ１０秒後に更新されたように見えるのですが、それ以降自動更新されないように見えます。。（なぜでしょうか。。？）画像のずれは別途調整してみます。
自動更新されないように見えるというのはどういうことでしょうか？
画像内容自体が、更新されない、ということですか？
それとも、パッとなるために更新されてないように見えるだけではないでしょうか？
>自動更新
キャッシュされるのでは。
自動更新されないように見える、というのは例えば以下URLの画像であれば１０分おきくらいに画像が入れ替わる（右下の時刻が変わっていくのでわかります）のですが、２０-３０分経っても時刻が変わらないという状態になります。（リロードボタンを押すと画像が入れ替わるのが分かるかと思います。）
http://blngs.net/typhoon_niigata.htm
kei344さん >
ですね。
ありがとうございます。
T2002475さん >
100%キャッシュです。
ふーむ、パラメータつける作戦でいきますか。
少々お待ちを
URLにタイムスタンプパラメータをつけ、同じファイルだが、常に新しいものを取得するよう、修正しました。
これでやってみてください。
更新いただいたソースで更新しましたが、やはり２回目以降、自動更新されないようです。１回目（10秒後）は右下の日時が差し替わるようになりましたが、それ以降10分おきの更新は行われていないようにみえます。。ブラウザ側で同じ画像ファイルURLだと更新しないようにしてしまっているのでしょうか・・？
http://blngs.net/typhoon_niigata.htm
うーーーーーーむ。
わかりました、もうちょいこちらでもやってみます。
> ブラウザ側で同じ画像ファイルURLだと更新しないようにしてしまっているのでしょうか・・？
可能性はあるかと。
ただ、だとしたら、ブラウザ側というよりサーバー側、かな・・・・
javascriptの最初の「setTimeout(() => {」を「timerID = setInterval(() => {」としてみたところ、一定時間ごとの更新はうまく行きました。ただ、これで文法が合っているかよく分からず、また画像更新時にやはり読み込み時の一瞬画面が白くなる現象が起こってしまいました。
もう一歩な感じがするのですが。。
あ・・・・・・・・・・
すみませんでした、まったく盲点でした。
そうですね、reloadさせないなら、setIntervalですね。
修正しますね。
そういうことか。
画像読み込みあと、さらに少しだけ下の画像を削除させるのを遅らせてみました。
ありがとうございます。
画面ズレは直しました！
更新も出来ているようなのですが、やはり以下ソースの末尾の500を100,500,1000,5000などと変えてみたのですがいずれも更新時に白地が出る事があります。白地が出るのは決まって画像の下半分のようです。
newImage.classList.add('backImage');
newImage.classList.add('center');
wrapper.appendChild(newImage);
newImage.onload = function(){
setTimeout(() => {
wrapper.querySelector('.center').remove();
this.classList.remove('.backImage');
}, 500);
上のソースですが、0.5秒待ってcenterとbackImageの両方のクラスを削除する、という内容でしょうか？
backImageが下の層で、imageWrapperが上の層と定義していますが、centerは消してしまった方がいいのでしょうか…？
centerの背景色が白だからなのでしょうか…？
（長々と、すみません…）
画像を囲っている、spanの高さを、CSSを使って、画像の高さと同じに変えてみて下さい。
span の高さを画像のサイズに固定してみました。
そして、上のソースの background-color: rgba(255,255,255,1);を削除してみたところ、ちらつきが消えました！これが白地の原因だったのでしょうか？
はっきりしませんが、解決したと思います！
本当にどうもありがとうございました！
裏側の画像は、position: absoluteを効かせているので、
高さが認識されないため、その親要素（span）が高さを持たない瞬間ができてしまっていたわけです。
ひとまず、実装できてよかったですね。
あなたの回答
tips
プレビュー
