javascript - キャッシュされた画像をクリアまたは置換する方法

Question

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

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

私は頭を悩ませ、これを行う方法（できればjavascriptを介して）をインターネットで探しましたが、運がありませんでした。助言がありますか？

score 62 · Accepted Answer

ページを動的に書き込んでいる場合は、最後に変更されたタイムスタンプをURLに追加できます。

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

score 14 · Accepted Answer

<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スクリプトを介して画像を提供することもできます（デフォルトではひどいcachabilityがあります;）

score 13 · Accepted Answer

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

(小さな注意点: 個々の<img>要素を更新する場合、および更新されたイメージを持つ要素が複数ある場合は、それらをすべてクリアまたは削除してから、それらを置換またはリセットする必要があります。1 つずつ行う場合、一部のブラウザーは、他のタグからイメージのメモリ内バージョンをコピーします。その結果、更新されたイメージがキャッシュにあるにもかかわらず、表示されない場合があります)。

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

score 10 · Accepted Answer

このように画像の URL を変更し、クエリ文字列にランダムな文字列を追加します。

"image1.jpg?" + DateTime.Now.ToString("ddMMyyyyhhmmsstt");

score 7 · Accepted Answer

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

score 5 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

画像のETAGを変更します。

于 2008-11-26T19:29:22.627 に答える

score 1 · Accepted Answer

http://en.wikipedia.org/wiki/URI_schemeを参照

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

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

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

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

score 1 · Accepted Answer

PHP 関数 filemtime() を使用したソリューションを次に示します。

<?php 
     $addthis = filemtime('myimf.jpg');
?> 
<img src="myimg.jpg?"<?= $addthis;?> >

ファイルの変更時刻をパラメーターとして使用すると、ファイルが変更されるまでキャッシュされたバージョンから読み取られます。このアプローチは、ファイルが変更されていない場合でもキャッシュが機能するため、たとえば乱数を使用するよりも優れています。

score 0 · Accepted Answer

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

あなたはFirefoxを実行していますよね？

Toolsメニューを探す
選択するClear Private Data
チェックされていることを確認する以外のすべてのチェックボックスをオフにしCacheます
OKを押します

:-)

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

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

タイムスタンプ（または同じものに相当するetag）を使用できないのはなぜですか？だけでなく、画像ファイル自体のタイムスタンプを使用する必要があることを忘れないでくださいTime.Now。
私は悪い知らせの担い手になるのは嫌いですが、他に選択肢はありません。

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

score 0 · Accepted Answer

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

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

これにより、各リクエストが一意になるため、常に最新のイメージを取得できます。

score 0 · Accepted Answer

画像ファイル名を変更できない場合は、サーバー側のセッション変数と JavaScriptwindow.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 回だけ更新できます。

お役に立てれば。

score 0 · Accepted Answer

画像のキャッシュを置き換えるには、サーバー側にいくつかのバージョン値を保存し、画像をロードするときにタイムスタンプの代わりにこの値を送信するだけです。イメージが変更されるときは、そのバージョンを変更します。

score -1 · Accepted Answer

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

myImg.src = " http://localhost/image.jpg ?" + new Date().getTime();

上記の解決策は私のために働きます:)

score -2 · Accepted Answer

私はとてつもなく単純なことを試しました：

Web サイトの FTP フォルダーに移動し、IMG フォルダーの名前を IMG2 に変更します。ウェブサイトを更新すると、画像が表示されないことがわかります。次に、フォルダー IMG2 の名前を IMG に戻すと、完了です。少なくとも Safari では機能しました。

javascript - キャッシュされた画像をクリアまたは置換する方法

22 に答える 22

Related

Reference