ブラウザに画像のhttpリクエストを送信させます

Question

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 

は、ブラウザが新しいリクエストこのイメージのすべての時間を作るべきではない：

空のキャッシュ応答で元の要求は、これらのヘッダを持っていますか？テストを実行すると、ブラウザは1分ごとに1つの新しいリクエストを作成するように見えます（ロードしようとする同じイメージのコピーの数に関係なく）。これは予期された動作ですか？イメージが変更されるたびにブラウザが毎回チェックするようにするヘッダーの組み合わせはありますか？あるいは、そのトリックを行うJavaScriptの魔法か？

Answer 1

私はあなたの問題は、ブラウザがイメージのコピーをローカルにキャッシュしていて、サーバーを往復するのではなく、それを使用していることを推測していますか？

jQueryを使用してリソースを取得するためのajax関数があれば、リクエストの最後に一意の番号が追加されるため、www.foo.com/bar.jpgのリクエストはwwwに変わります.foo.com/bar.jpg？1234567

これにより、セッション内でURLがかなりユニークになるため、ブラウザはローカルにキャッシュされたイメージを使用するだけでなく、新しいコピーを取得するためにサーバーにアクセスします。

これは回避策として実行できる可能性がありますか？

Answer 2

あなたが問題の解決策を見つけたかどうかはわかりませんが、私はまったく同じ問題を抱えていましたが、解決策があると思います。私がしたのはリクエストを行うために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*/} 
}); 

これは私のために機能します。それがあなたを助けることを願っています