0

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サーバーにも影響を与えるため、理想的ではありません。また、ビルドのたびにキャッシュをクリアするようにテスターに​​指示する必要があるのも面倒です。ですから、根本的な原因に対処する方法があるのだろうかと思います。

ありがとう!

4

1 に答える 1

0

CSS、JS、画像ファイルにWebサイトのバージョン値を追加することがよくあります。次に、更新後にバージョンをインクリメントでき、ブラウザは最新のファイルをロードします。例えば:

<img src="picture.jpg?v=1.1">
于 2013-01-04T21:18:29.853 に答える