10分間隔で更新される画像をその都度読み込み

現在、WordPressでホームページ作成をしています。
ホームページ上に気温の推移画像を載せています。
その画像は、自作のアプリケーションで気温をモニタし、グラフと現在の気温を10分間隔で描画しています。
描画されたグラフと現在の気温の画像は10分間隔ででサーバー上に同じ名前で上書きされるようになっています。

やりたいこと

アップロードされた画像をブラウザの更新ボタンを押さずに自動で更新
更新する際、画面が動かないように画像のみ更新
更新されてもキャッシュの影響で更新されないことがあるのでクエリ？をつけるようにする
その自動更新をラジオボタンでする/しないを管理できるようにする

ラジオボタンを作成して、そのする/しないの管理は自分でもできました。
ただ、画像のみ自動更新させるやり方がわかりません。

教えてもらいたいこと

JavaScriptでタイマーを使って、一定間隔でサーバーに見に行き新しい画像があればページを再読み込みするのではなく画像のみ更新するやり方。

以上です、よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

画像を更新する処理を簡単に実装するとこんな感じになります。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <script>
5      document.addEventListener('DOMContentLoaded', function(){
6        const RELOAD_SPAN = 10000;
7        function reload(){
8          document.getElementById('figure').src =　'figure.png' + '?' + Date.now();
9        }
10        setInterval(reload, RELOAD_SPAN);
11      });
12    </script>
13  </head>
14  <body>
15    <img id="figure" src="figure.png">
16  </body>
17</html>
18

対象の img 要素を取得し、src プロパティを書き換えるだけです。

投稿2018/07/31 07:02

R.Mizukami

総合スコア1086

miyabi-sun

2018/07/31 07:50

setIntervalの第二引数はミリ秒単位なので、質問文の10分間隔を満たす場合、10 * 60 * 1000の600000になりそうですね。

R.Mizukami

2018/07/31 08:29

おっしゃる通りですね。質問に時間の指定があったことを見落としてました。

退会済みユーザー

2018/07/31 09:07

R.Mizukamiさんのを参考にしたらできました！！ありがとうございました！！！１

行動規範の内容に同意します

画像の更新はimgタグのｓｒｃ属性をjsから書き換えることで更新可能です。
同一のファイル名の場合はパラメータを付与してください。

サーバの画像存在チェックが必要な場合はAjaxを使用すると良いと思います。
画像URLに対してGETリクエストを投げ、200で返ってくるかどうかで判別するか
サーバサイド側で画像の存在チェックを行い、urlを返すスクリプト(phpなど)を作成してください。

以下コードをsetTimeoutなどで一定時間ごとにループするといいと思います。

js
1$.ajax({
2   type: 'GET',
3   url: '画像のURL'
4}).done(function(data) {
5   // 200系のステータスコードであればここが実行される
6   // src属性を更新する処理
7});
8

投稿2018/07/31 06:02

編集2018/07/31 08:31

ShoheiTai

総合スコア911

退会済みユーザー

2018/07/31 06:22

回答ありがとうございます。 >画像の更新はimgタグのｓｒｃ属性をjsから書き換えることで更新可能です。 >同一のファイル名の場合はパラメータを付与してください。わかりました！なんとなくやり方がわかる気がします！やってみます！ >サーバの画像存在チェックが必要な場合はAjaxを使用すると良いと思います。 >画像URLに対してGETリクエストを投げ、200で返ってくるかどうかで判別するか >サーバサイド側で画像の存在チェックを行い、urlを返すスクリプトを作成してください。うーん、少し難しそうですね、もう少し詳細に教えてもらうことできますか？ヒントをください！

ShoheiTai

2018/07/31 08:36

追記してみました！ちなみに画像のURLは毎回変わる仕様になってますか？

退会済みユーザー

2018/07/31 09:07

ありがとうございます！！しかし、自分の実力不足で理解ができなかったです...(-_-;) R.Mizukamiさんとネットを参考にしたらできました！！でもajaxについて勉強になりました！！ありがとうございました。あ、ブログも拝見しました！応援してます！！

ShoheiTai

2018/08/01 06:11

おお！見てくださったんですね、ありがとうございます！今回お力になれずすみません・・！

行動規範の内容に同意します

あなたの回答