HTMLの画像自動更新について

このQ&Aのポイント
  • HTMLの画像自動更新について解説します。
  • 現在、<meta http-equiv="Refresh" content="5">で自動更新をしているのですが、毎回同じ画像が表示されてしまいます。
  • F5を押すと画像は更新されます。キャッシュに問題があるのではと調べて下記のように書きました。HTMLの画像自動更新についての方法や設定について詳しく教えてください。
回答を見る
  • ベストアンサー

HTMLの画像自動更新について

現在、 <meta http-equiv="Refresh" content="5">で自動更新をしているのですが、 毎回同じ画像が表示されてしまいます。 F5を押すと画像は更新されます。 キャッシュに問題があるのではと調べて下記のように書きました。 <HTML> <HEAD> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache"> <meta equiv="Expires" content="-1"> <meta http-equiv="Refresh" content="5;URL=index_i_i.html"> URLの「index_i_i.html」は同じHTMLファイル(名前は変えて)を用意して交互に飛ぶように設定しました。 ですが、上記の記述でも同じ画像が表示されます。 F5では更新されるのですが、F5と同じ更新をHTML内に記述するにはどうしたらよろしいのでしょうか? できれば、CGIやスクリプトは使いたくないのですが、使わなくてはいけないのであれば、教えてください。 お願いします。

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

これ、HTMLだけでは難しいようです。 no-cacheを指定すると、HTML自体はキャッシュされずに毎度新しく読み直します。 ですがそこからリンクされている画像・CSS・JavaScriptなどはキャッシュされてしまうので、せっかく新しいHTMLを取ってきても画像は前のまま表示されるという現象になるようです。 回避策は .htaccess に画像もキャッシュしないよう記述することです。 記述としてはこんな感じでしょうか。 <FilesMatch ".(gif|jpg|png)$"> Header unset Cache-Control </FilesMatch> 参考:ウェブサイトのパフォーマンス改善やセキュリティに役立つ.htaccessの設定 | コリス http://coliss.com/articles/build-websites/operation/work/17-useful-htaccess-tips.html あと、JavaScriptを使ってよければ、画像ファイルを可変パラメータつきで呼び出すなんて手もあります。

balius2_opti
質問者

お礼

HTML範囲ではできないみたいですね。 ありがとうございました。

その他の回答 (2)

回答No.3

初めまして 表示する度に(ブラウザの更新ボタン含む)表示される画像を変更する方法は PHPやCSSやjavascriptなどいくつか方法があります。 一番簡単な方法はjavascriptでの記述だと思います。 求めていた方法ではないかもしれませんが参考にして下さい。

参考URL:
http://e-html.aofp.net/java_info/j_sample.html
balius2_opti
質問者

お礼

やっぱりそっちになってしまうのですね。 そちらの知識がないため、サンプルを見ても理解できませんでした。 勉強したいと思います。 ありがとうございました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

.htaccessに画像のキャッシュをしないよう指示するか・・それでもIEは設定によっては無視してキャッシュするけど・・  HTMLを読み込ませるたびに、HTMLを書き直すという手法もある。abc.jpg→def.jpg→・・・たとえば、現在時刻の時計の画像とかに使ったことがあります。

balius2_opti
質問者

お礼

HTMLを書きなおす事が出来る方法を勉強したいと思います。 ありがとうございました。

関連するQ&A

  • 画像が更新されない

    はじめまして。 ご相談したいことなのですが、 php5 mysql を使用してプログラムを作成しております。 そしてつまずいてしまい2日間解決できずに皆様の力をお借りできればと思います。 フォームを使用し画像を登録するシステムを作っています。 そして画像を変更するシステムを作成しているところで、画像の更新が表示上反映されないのです。 データベース・ティレクトリ内は更新されていて、ページを更新(F5)をするまで画像が反映されないのです。 キャッシュが残っているのかと思い、 <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> の記述をしたり 画像を入れているディレクトリに.htaccessを使い Header set Cache-Control "no-cache" Header set Pragma "no-cache" と記述しているのですがまったくダメで困っています。 単純なことかも知れませんがよろしくお願い致します。

    • ベストアンサー
    • PHP
  • 画像が更新されない2

    はじめまして。 ご相談したいことなのですが、前回下記の質問をしました。 ************************************************************************** php5 mysql を使用してプログラムを作成しております。 そしてつまずいてしまい2日間解決できずに皆様の力をお借りできればと思います。 フォームを使用し画像を登録するシステムを作っています。 そして画像を変更するシステムを作成しているところで、画像の更新が表示上反映されないのです。 データベース・ティレクトリ内は更新されていて、ページを更新(F5)をするまで画像が反映されないのです。 キャッシュが残っているのかと思い、 <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> の記述をしたり 画像を入れているディレクトリに.htaccessを使い Header set Cache-Control "no-cache" Header set Pragma "no-cache" と記述しているのですがまったくダメで困っています。 単純なことかも知れませんがよろしくお願い致します。 ************************************************************************ 上記の質問でURLの後ろにrand関数で?id=***などをつけるとページが更新されるとご回答頂きまして、試したところそのときは無事出来たのですが、また何度かやっているうちに画像が更新されないようになっています。 何か問題があるのでしょうか? 使用しているブラウザの問題なのでしょうか? 何度も同じ質問になってしまい申しわけございませんがよろしくお願い致します。

    • ベストアンサー
    • PHP
  • MACのsafariでCGIを動作した場合、リロードボタンを押さないと更新されません。教えて下さい。

    MACのsafariでCGIを動作した場合、リロードボタンを押さないと更新されません。教えて下さい。 今perlを使ってスケジュール管理を作っていますが、IEでは、ちゃんと動作します。HTMLに <HEAD> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> </HEAD> と記述し、キャッシュを無効にしてみたのですが、 どうしてもsafariだと新規でスケジュールを入力したものがカレンダーに反映されません。 これは、HTML記述では、キャッシュを無効に できないのでしょうか? 教えて下さい。

    • ベストアンサー
    • Perl
  • URL指定のないHTTP-EQUIV="Refresh"

    稀に以下の様なページが出る事があるのですが、 これはどういう原因で起こるのでしょうか? <HTML> <HEAD> <META HTTP-EQUIV="Refresh" CONTENT="0.1"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1"> </HEAD> </HTML> 0.1秒毎にキャッシュ消しながらリフレッシュ、という意味だと思うのですが、サーバー攻撃みたいな事になっていて困っています。

  • 画像をキャッシュさせたくない

    CGIで動的に画像を表示するため表示した画像をキャッシュさせたくないのですが、どうすればいいのでしょうか。 他のページなどを参考に <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> をヘッダーに入れてみましたし、リダイレクトしたURLの後ろに無意味なランダム数字を入れても見ましたが、やはりキャッシュされています。 たとえキャッシュされていても無視して読み込むようなヘッダーとか何か確実に新たに読み込む方法はないでしょうか。

    • ベストアンサー
    • HTML
  • CGIで画像更新??

    初めて投稿します。 短い間隔でサーバに送られてくるJPEG画像をcgiか何かを使って一定間隔で更新するホームページを作りたいのですが・・・ 数少ない知識を使っては見たのですが、 META content="text/html; charset=shift_jis" http-equiv=Content-Type META http-equiv="refresh" content="20" META HTTP-EQUIV="Pragma" CONTENT="no-cache" これだと、リロードの時に画像が上から表示されるので、シャッターを切っているみたいで使用できないと言われてしまいました。 特に言語は問いませんので宜しくお願いします。

    • 締切済み
    • CGI
  • ブラウザの自動更新について

    ブラウザの自動更新について質問させていただきます。 <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="以前の時間"> 古いキャッシュを読まずにブラウザに新しいページを読みたい時、上のブラウザごとに異なる?3種類の対応方法があるかと思いますが、これらは適切な方法でしょうか。 例えばyahooのトップページは上の方法を使わずに自動更新しているようですが、上記のmetaは埋め込まれていませんでした。また他の多くのポータルサイトもそうでした。どのように自動更新しているのでしょうか。 どのようにすれば、更新ボタンを押さずに更新できるのか、また自動更新の際、上記のmetaを使ったほうがいいのか、それともyahooのように別の方法を使ったほうがいいのか、教えていただけないでしょうか。 初心者の質問で、質問内容が乱れてしまいましたが、どうぞよろしくお願いいたします。

  • 3日に1回リロードさせたい

    ページの情報を更新したときに、ブラウザのキャッシュの影響でページが更新されないことがあります。 cssが読み込まれていなかったり、htmlの変更が反映されていなかったり、 そのときはF5でリロードさせることで更新を反映させています。 ユーザーが自分でリロードを実行することなく、 自動的に更新させる方法を探しました。 <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="-1"> この方法だとキャッシュを削除することができ、 複数のブラウザにも対応できるそうですが、 キャッシュを毎回削除してしまうと ページを開く度に重くなってしまいます。 3日に1回、更新させる、ということはできませんか? <meta http-equiv="expires" content="Sat, 15 Nov 2012 12:00:00 GMT"> を <meta http-equiv="expires" content="Sat, 18 Nov 2012 12:00:00 GMT"> <meta http-equiv="expires" content="Sat, 21 Nov 2012 12:00:00 GMT"> のように3日ごとに更新するしかないのでしょうか。

  • 時間指定で 自動更新中止させる

    <meta http-equiv="refresh" content="30; url=./index.htm"> 上の記述で 30秒間隔でライヴ画像を自動更新させています。夜間は 画像アップしない為 自動更新しないようにしたいのですが 多分 IF文 を挿入すればよいのだろうとは 思いますが どうやってやるのか ヒントを 教えてもらえませんか。ちなみに AM 6:00~PM 6:30 の間 自動更新させたいわけです。 よろしく お願いします。

    • ベストアンサー
    • HTML
  • ページ内の画像だけを一定時間毎に自動更新させたい

    ネットワークカメラを使って、留守中の犬をモニターしています。 FTPサーバーに10秒ごとに静止画のJPGファイル(同名)が転送 されるように設定しています。 これをサイト内で公開したいと思っており、出来れば画像のみを 10秒ごとに自動更新で表示されると良いなと思っております。 ページ全体をリロードさせてしまうと、鬱陶しいことになりますので、 画像だけリフレッシュさせたいのですが、うまくいきません。 過去の質問(http://okwave.jp/qa1104885.html)を拝見し、 Iframe内に埋め込んだのですが、更新されません。 また、良回答の書き方でもうまくできませんでした・・・。 キャッシュを残させないようにもしたのですが。 この書き方では間違っていますでしょうか。 ------------- ■iframe.html ------------- <HTML> <HEAD> <META http-equiv="refresh" content="10"> </HEAD> <BODY> <img src="http://×××.××.jpg"> </body> </HTML> ------------- ■index.html ------------- <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis"> </HEAD> <BODY> <iframe src="http://×××.××.jpg"> </iframe><br> </body> </HTML> また、別の方法でスムーズに画像だけを更新させる方法がございましたら 教えていただけないでしょうか。よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう