1

サーバー上で定期的に更新される画像を更新したいので、次のように読み込みます。

var img = new Image();
img.onload = myCallback;
img.src = imageUrl;

imageUrl は常に同じであり、これらの HTTP ヘッダーを設定して、画像を読み込もうとするたびにブラウザーが新しい要求を発行するように強制します。

Cache-Control: public,max-age=0
Expires: -1
Last-modified: Mon, 21 Nov 2008 01:03:33 GMT
ETag: 1234

ただし、Chrome でのみ機能します。Firefox、Opera、IE、および Safari は、最初にサーバーにリクエストを送信するだけで、その後は常にキャッシュされた画像を取得します。

img.src = '' を myCallback に追加すると、Opera と IE では動作しますが、Firefox と Safari では動作しません (Firefox 11 のみを試しました)。

URL にランダムなクエリ文字列を追加することもできますが、ほとんどの場合、サーバーは 304 Not modified で応答するため、より多くの帯域幅を消費します。

Firefox で動作させる方法はありますか?

4

2 に答える 2

1

一貫性のないブラウザーとサーバーの動作に依存する代わりに、2 段階のプロセスにすることができます。

  1. クライアントが画像が更新されたかどうかを確認するために使用できる URL への AJAX 呼び出しを行います (その画像にキャッシュを強制しません)。
  2. 更新されている場合は、新しい URL で更新しimage.srcます (ベース URL に新しい文字列が追加されます)。

URL に追加されるランダムな文字列として、画像の最終更新の UNIX タイムスタンプのようなものを使用できます。

JQuery スタイルの疑似コードを使用した例 (そのままでは機能しない場合があります):

function updateImage() {
    $.get('/HasImageBeenUpdated?', function(answer) {
       // answer could be JSON: {wasUpdated: true, newImageUrl: 'url'} 
       if (answer.wasUpdated === true) {
            $('#theImage').attr('src', answer.newImageUrl);
        }
    });
}
setInterval(updateImage, 1000); // update every second
于 2012-04-23T21:30:17.050 に答える
0

キャッシュを毎回上書きするには、URL の末尾に乱数をパラメータとして追加します。

于 2012-04-11T10:06:56.217 に答える