ページをリロードしないと動的にロードされた画像が更新されないのはなぜですか?

トラブルシューティング: 画像が動的に更新されない

要求されるたびに新しい画像を提供するリンクにアクセスすると、画像がページをリロードしない限り、ページの背景は更新されません。

以下のコードは、問題:

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

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

    setTimeout(updateImage, 1000);
}

このシナリオでは、リクエスト ヘッダーがキャッシュが無効であることを示しているにもかかわらず、ページ上の画像が更新されません:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache

解決策: キャッシュブレーカー

画像を強制的に更新するには、キャッシュブレーカーをファイルの末尾に追加します。 URL:

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

現在のタイムスタンプを追加すると、ブラウザーはキャッシュされたバージョンを使用する代わりにサーバーから画像を取得します。この手法により、ページ上の画像を期待どおりに動的に更新できるようになります。

以上がページをリロードしないと動的にロードされた画像が更新されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。