画像にこだわる/ブラウザでキャッシュされたCSS

Question

私のウェブページには、バックエンドから更新する画像があります。しかし、直接反映されない画像は、ユーザがctr + F5を行う必要があることを意味します。これは、クライアントのブラウザがその画像をキャッシュしていることを意味します。一度thayが更新されたら、更新されたイメージ、JS、CSSをリロードする方法はありますか？

私は私の側から何をしようとしています。

ETag 

私のためにはうまくいきませんでした。

私のページヘッダ

<meta http-equiv="Expires" CONTENT="-1" ></meta> 

<meta http-equiv="cache-control" content="no-cache"></meta> 

<meta http-equiv="Pragma" CONTENT="no-cache"></meta> 

しかし、同じ結果にタグを次を追加しました。 JSのために働く

ExpiresActive on 
ExpiresByType application/javascript "access plus 0 seconds" 
ExpiresByType image/jpg "access plus 0 seconds" 
ExpiresByType image/jpeg "access plus 0 seconds" 
ExpiresByType image/gif "access plus 0 seconds" 
ExpiresByType image/png "access plus 0 seconds" 
ExpiresByType text/css "access plus 0 seconds" 

上記構成のApache

で

を追加し、以下のような構成。しかし、イメージに直面する問題。 url/image名の末尾にトークン番号またはバージョン番号を追加することはできませんが、これはあまりにも多くのコード変更とテストが必要でした。 キャッシングから画像を制限するその他の集中管理方法はありますか

ありがとうございました。

Answer 1

javascriptを使用してイメージのsrcを変更すると、名前が変更され、ブラウザが強制的にリロードされます。

例：

document.getElementById('myimg').src = document.getElementById('myimg').src + '?r=' + Math.random(); 

ないクリーンなソリューションが、あなたの選択肢は限られているようです。

は、あなたが試みることができるjQueryを使ってページ全体の画像をリロードするには：あなたはすべてをリロードしなくて済むよう、最初のセレクタを変更することにより

$('img').each(function() { 
    $(this).attr('src', $(this).attr('src') + '?r=' + Math.random()) 
}); 

はあなたが地域にそれを制限することができます。 CSSスタイリングで指定された画像には影響しません。