IEの+またはChromeの++でCtrlページを更新すると、ほとんどの画像も更新されますが、動的に生成されたHTML要素(AJAX / jQueryを介して)から参照される画像の一部は更新されません。動的なDOM更新後にフェッチされた画像は、ページがハードリフレッシュされた場合でも、常にキャッシュにヒットしているように見えます。F5CtrlShiftR
フィドルの例:http: //jsfiddle.net/dhDju/4/ (Chrome / IE開発者ツールの[ネットワーク]タブを使用します)。
これはChromeとIEで一貫しています-Chromeは「キャッシュから」の画像リクエストを表示し、IEはそれをまったく表示しません。ハードリフレッシュは、ページ上の後続のDOM変更には適用されないようです。
したがって、キャッシュを明示的にクリアしない限り、これらの画像への変更は有効になりません。
これは、requires.jsを使用しているときに、スクリプトでも時々見られます。その場合、<script>
タグも動的に生成されます。
なぜこれが起こるのか、またはそれを修正する方法はありますか?
cache-control / max-ageヘッダーは、動的要素には関係ないようです。私のQAサーバーには、キャッシュ制御ヘッダーまたは期限切れヘッダーがありませんが、動的要素でこの問題が発生します。私が見る主な違いは、キャッシュヘッダーがないと、「通常の」<img>
リソースも、F5またはCtrl+Rを使用したソフトリロードで条件付きGET/304未変更の応答で更新されることです。
私はリリース後にファイルの名前を変更するという考えに精通しています。これは各ビルドの開発サーバーとQAサーバーにも影響を与えるため、理想的ではありません。また、ビルドのたびにキャッシュをクリアするようにテスターに指示する必要があるのも面倒です。ですから、根本的な原因に対処する方法があるのだろうかと思います。
ありがとう!