1. ホーム
  2. javascript

[解決済み] 同じURLの画像を新しいものに更新する

2022-02-07 10:16:12

質問

私のサイトのリンクにアクセスすると、アクセスするたびに新しい画像が提供されます。

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

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

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

解決方法は?

私が最終的に行ったのは、サーバーに、そのディレクトリにある画像へのリクエストを、更新しようとしているソースにマッピングさせることでした。そして、DOMがそれを新しい画像とみなして読み込むように、タイマーに名前の最後に数字を追加させたのです。

http://localhost/image.jpg
//and
http://localhost/image01.jpg

は同じ画像生成コードを要求しますが、ブラウザからは異なる画像に見えます。

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
var count = 0;
function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        newImage.src = "http://localhost/image/id/image" + count++ + ".jpg";
    }
    setTimeout(updateImage, 1000);
}