5

JavaScript を使用して画像を動的に読み込み、キャンバスに描画するアプリがあります。画像は変更される可能性がありますが、キャッシュも活用したいので、最後に変更された http ヘッダーを使用し、画像が変更されていないときに 304 応答を送信しています。それはすべて問題なく、うまく機能しているようです...

しかし、奇妙なことが起こっています (これまでのところ、OSX 上の Chrome と Safari でのみテストされています)。ブラウザが画像のリクエストを送信するのを無視することがあります! スクリプトで を作成するnew Image()と、onload関数が起動しますが、ネットワーク インスペクターを使用すると、要求が行われません。リクエストが受信されていないこともサーバー側で確認できます。

キャッシュ レスポンスが空の元のリクエストには、次のヘッダーがあります。

Connection:keep-alive
Content-Length:25937
Content-Type:image/png
ETag:Thu, 10 May 2012 20:48:13 GMT
Last-Modified:Thu, 10 May 2012 20:48:13 GMT

この画像には last-modified ヘッダーがあるため、ブラウザは毎回この画像に対して新しいリクエストを行うべきではありませんか? テストを実行すると、ブラウザは 1 分ごとに新しいリクエストを 1 つしか作成しないようです (同じ画像のコピーをいくつロードしようとしても)... これは予想される動作ですか? 画像が変更されたかどうかを毎回ブラウザに確認させるヘッダーの組み合わせはありますか? それとも、このトリックを実行する JavaScript マジックでしょうか?

4

1 に答える 1

0

問題の解決策を見つけたかどうかはわかりませんが、まったく同じ問題に苦しんでいたので、今は解決策があると思います. 私がしたことは、リクエストを行うために ajax 呼び出しを使用し、画像をタイプ image/jpeg のファイルとして返す代わりに、データを base64_encoded データとして返し、クライアント側で src をデータに設定して img をレンダリングすることでしたうり。jQuery を使用すると、次のようになります。

jQuery.ajax({
    url: imageURL,
    headers: {'Max-Age':0},
    success: function(d){
                jQuery(imgElement).attr('src','data:image/jpeg;base64,'+d);
             },
    error: function(){/*handle error*/},
    complete: function(){/* handle complete*/}
 });

これは私にとってはうまくいきます。お役に立てば幸いです。

于 2012-05-29T18:59:17.740 に答える