web-dev-qa-db-ja.com

キャッシュされた画像を消去または置換する方法

画像のキャッシュ（METAタグなど）を防ぐ方法はたくさんありますが、ページの読み込みごとに画像の現在のバージョンが表示されるようにするいくつかの素敵なトリック（image.jpg？x = timestampなど） ）、しかし、ブラウザのキャッシュ内の画像を実際にクリアまたは置換する方法はありますか？

例として、1ページに100個の画像があり、これらの画像の名前が「01.jpg」、「02.jpg」、「03.jpg」などであるとします。画像「42.jpg」が置き換えられた場合、 「42.jpg」が連続したページの読み込み時に新しい画像を自動的に表示するように、キャッシュ内でそれを置き換える方法はありますか？ METAタグメソッドは使用できません。キャッシュを維持するにはISN "Tで置き換えたすべてのものが必要であり、タイムスタンプメソッドは使用できません。ページごとにすべての画像をリロードしたくないためです。読み込みます。

私はこれを行うための方法を探して頭を悩ませ、インターネットを探しました（おそらくjavascriptを使用）が、運はありません。助言がありますか？

javascriptimagecachingreplace
34
tallvanilla

ページを動的に記述している場合、最終変更タイムスタンプをURLに追加できます。

<img src="image.jpg?lastmod=12345678" ...

51
Greg

<meta>はまったく無関係です。実際、キャッシュの制御にまったく使用しないでください（ドキュメントのコンテンツを読み取るまでに、既にキャッシュされています）。

HTTPでは、各URLは独立しています。 HTMLドキュメントに対して何をしても、画像には適用されません。

キャッシュを制御するために、コンテンツが変更されるたびにURLを変更できます。時々画像を更新する場合、それらを永久にキャッシュし、新しい画像に新しいファイル名（バージョン、ハッシュ、または日付）を使用できるようにします。これは、長寿命ファイルに最適なソリューションです。

画像が非常に頻繁に変更される場合（数分ごと、またはリクエストごとに）、Cache-control: no-cacheまたはCache-control: max-age=xxを送信します。 xxは、画像が「新鮮」である秒数です。

寿命の短いファイルのランダムURLはお勧めできません。役に立たないファイルでキャッシュを汚染し、有用なファイルをより早く強制的に削除します。

Apacheとmod_headersまたはmod_expiresがある場合は、適切なルールで.htaccessファイルを作成します。

<Files ~ "-nocache\.jpg">
   Header set Cache-control "no-cache"
</Files>

上記は*-nocache.jpgファイルをキャッシュ不可にします。

PHP script（デフォルトではひどいキャッシュ機能を備えています;）

11
Kornel

このような画像URLを追加します

"image1.jpg？" + DateTime.Now.ToString（ "ddMMyyyyhhmmsstt"）;

クエリ文字列にランダムな文字列を追加するだけです

ありがとうございました

ラジュ・ジェトラ

11
Raju Jetla

他の回答のいくつかが言ったことに反して、[〜＃〜] [〜＃〜]クライアント側のjavascriptを置き換える方法がありますキャッシュされた画像。秘Theは、隠された_<iframe>_を作成し、src属性を画像URLに設定し、それがロードされるのを待ってから、location.reload(true)を呼び出して強制的にリロードすることです。これにより、キャッシュされた画像のコピーが更新されます。その後、ページの_<img>_要素を置き換えて（またはページをリロードして）、画像の更新されたバージョンを表示できます。

（小さな警告：個々の_<img>_要素を更新する場合、および更新されたイメージを持つものが複数ある場合、それらをすべてクリアまたは削除してから、それらを交換またはリセットする必要があります。ブラウザによっては、一部のブラウザが他のタグから画像のメモリ内バージョンをコピーするため、キャッシュ内にあるにもかかわらず更新された画像が表示されない場合があります）。

この種の更新を行うためのコードを投稿しました here 。

9
Doin

新しいバージョンを与えるような画像に乱数を追加できます。同様のロジックを実装しましたが、完全に機能しています。

<script>
var num = Math.random();
var imgSrc= "image.png?v="+num;
$(function() {
$('#imgID').attr("src", imgSrc);
})
</script>
5
abhiagNitk

ほとんどのブラウザは Last-Modified HTTPヘッダーを尊重していると確信しています。それらを送信し、新しい画像をリクエストします。 Last-Modified行が変更されない場合、ブラウザによってキャッシュされます。

5
strager

？x = timestampトリックが使用される理由は、それがイメージごとにそれを行う唯一の方法だからです。その、または動的にイメージ名を生成し、イメージを出力するアプリケーションを指します。

サーバー側で、イメージが変更/更新されているかどうかを把握し、そうであれば、？x = timestampトリックを使用してタグを出力し、新しいイメージを強制することをお勧めします。

1
TravisO

http://en.wikipedia.org/wiki/URI_scheme を参照してください

Uriのドメイン部分のプレフィックスとして、一意のusername：password @コンボを提供できることに注意してください。私の実験では、これを偽のID（または私が推測するパスワード）に含めると、リソースが一意として扱われるため、必要に応じてキャッシュが破損することがわかりました。

ユーザー名としてタイムスタンプを使用するだけで、認証が有効になっていない限り、サーバーがuriのこの部分を無視することがわかります。

ところで-私は？param = timestampトリックが機能していた場所にあったGoogleマップマーカーアイコンキャッシュの問題で上記のトリックを使用することもできませんでしたが、オーバーレイが消える問題を引き起こしました。なぜこれが起こっているのかを理解することはできませんでしたが、これまでのところ、この方法を使用してこれまでのところ良い結果が得られています。私が確信していないのは、偽の資格情報を渡すと、サーバーのパフォーマンスに悪影響が出るかどうかです。誰もが知っていれば、私はまだ大量生産になっていないので知りたいと思います。

結果を報告してください。

1
Inator

いいえ、Webサーバーまたは送信するファイルに含めることができるものによって、ブラウザキャッシュ内のファイルを強制的に削除する方法はありません。ブラウザーのキャッシュはブラウザーが所有し、ユーザーが制御します。

したがって、各ファイルと各URLは、慎重に管理する必要がある貴重なリソースとして扱う必要があります。

したがって、画像ファイルのバージョン管理に関するporneLの提案は、長期的な最善の答えであると思われます。 ETAGは通常の状況で使用されますが、おそらくあなたの努力によって無効にされたのでしょうか？提案されているように、ETAGを変更してみてください。

0
Rob Williams

私は通常、@ Gregが言ったのと同じことを行い、そのための機能を持っています。

function addMagicRefresh(url)
{
    var symbol = url.indexOf('?') == -1 ? '?' : '&';
    var magic = Math.random()*999999;
    return url + symbol + 'magic=' + magic;
}

サーバーはそれを受け入れ、他の方法で「マジック」パラメーターを使用しないため、これは機能します。

役に立てば幸いです。

0
Wagner Bertolini Junior

画像のETAGを変更します。

0
StingyJack

以下の解決策を試してください、

myImg.src = " http：//localhost/image.jpg ？" +新しいDate（）。getTime（）;

上記のソリューションは私のために働く:)

0
Rakesh Chaudhari

画像ファイル名の変更がオプションではない場合、サーバー側のセッション変数とjavascript window.location.reload()関数を使用します。次のように：

アップロード完了後：

Session("reload") = "yes"

page_loadで：

If Session("reload") = "yes" Then
    Session("reload") = Nothing
    ClientScript.RegisterStartupScript(Me.GetType), "ReloadImages", "window.location.reload();", True)
End If

これにより、1回発生するとセッション変数がリセットされるため、クライアントブラウザーは1回のみ更新できます。

お役に立てれば。

0
Pete

Pictoreのキャッシュを置き換えるには、サーバー側に何らかのバージョン値を保存し、画像を読み込むときにタイムスタンプの代わりにこの値を送信するだけです。画像が変更されたら、バージョンを変更します。

0
ikryvorotenko

イメージが再アップロードされた場合、以前にキャッシュされたイメージをクライアント側でクリアまたは置換する方法はありますか？上記の私の例では、目標はブラウザに「42.jpg」が何であるかを忘れさせることです

Firefoxを実行していますか？

  • Toolsメニューを見つけます
  • 選択する Clear Private Data
  • Cacheがオンになっていることを確認する以外のすべてのチェックボックスをオフにします
  • OKを押す

:-)

真面目に言って、私はそのようなものが存在することを聞いたことがなく、そのためのAPIがあるとは思わない。ブラウザー開発者の一部がキャッシュをいじくり回すのは良い考えだとは想像できません。そのような機能を実装する動機はありません。

METAタグメソッドを使用することはできませんORタイムスタンプメソッド。通常の状況ですべての画像をキャッシュするためです。

タイムスタンプ（または同じものに相当するetag）を使用できないのはなぜですか？タイムスタンプを使用する必要があることに注意してくださいイメージファイル自体のではなく、Time.Now。
悪いニュースの担い手になるのは嫌いですが、他の選択肢はありません。

画像が変更されない場合、タイムスタンプも変更されないため、すべてが「通常の状況で」キャッシュされます。画像が変更されると、新しいタイムスタンプ（キャッシュの理由で必要になる）が取得されますが、そのタイムスタンプは、誰かが再び画像を置き換えるまで有効です。

0
Orion Edwards

このコードスニペットを試してください：

var url = imgUrl? + Math.random();

これにより、各リクエストが一意になるようになり、常に最新の画像が取得されます。

0
Akbar Badhusha