URL から画像を動的に表示し、ブラウザーのキャッシュを回避するにはどうすればよいですか?

URL がキャッシュされた動的画像の表示

各アクセスで一意の画像が得られるように、特定の URL から画像を取得するシナリオを考えてみましょう。画像。ただし、ページ上の画像を更新しようとすると、ページが再ロードされない限り、画像は変更されません。

画像表示用の JavaScript コード

次の JavaScript コードは、次のことを示しています。画像の表示と更新のメカニズム:

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage() {
  if (newImage.complete) {
    document.getElementById("theText").src = newImage.src;
    newImage = new Image();
    newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
  }

  setTimeout(updateImage, 1000);
}

指定されたシナリオでは、ブラウザーがキャッシュする可能性があるため、画像は更新されません。指定された URL にある画像。これにより、ブラウザが最新の画像バージョンを取得できなくなる可能性があります。

キャッシュの問題を解決する

画像を強制的に更新するには、URL にキャッシュブレーカー。これにより、ブラウザーはキャッシュされたバージョンに依存するのではなく、サーバーから直接画像を取得するようになります。修正されたコードには次のものが含まれます。

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

この追加により、画像が作成されるたびに現在のタイムスタンプが URL に追加されるようになります。その結果、ブラウザはキャッシュされたバージョンにアクセスする代わりに、サーバーから画像を取得します。このキャッシュブレーカーを追加すると、ページ上の画像が動的に更新され、サーバーが提供する最新バージョンが反映されます。

以上がURL から画像を動的に表示し、ブラウザーのキャッシュを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。