☰

同じURLの新しい画像を更新する 質問する

tag-icon • tag-icon javascript image url refresh
同じURLの新しい画像を更新する 質問する

アクセスするたびに新しい画像が表示されるサイト上のリンクにアクセスしています。

私が遭遇している問題は、バックグラウンドで画像を読み込んでからページ上の画像を更新しようとすると、ページを再読み込みすると更新されるにもかかわらず、画像が変更されないことです。

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);
}

Firefox が表示するヘッダー:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT

ページ上のその画像だけを強制的に更新する必要があります。何かアイデアはありますか?

ベストアンサー1

URL の末尾にキャッシュブレーカーを追加してみてください:

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

これにより、画像を作成するときに現在のタイムスタンプが自動的に追加され、ブラウザはキャッシュ内の画像を取得するのではなく、再度画像を検索するようになります。

おすすめ記事