7

同じ画像を複数の場所に表示するアプリがあり、画像の src が変更される可能性があります。

以前に使用したことのある PNG 画像を指定すると、ブラウザーはわざわざ新しい要求を行うことはなく、既にキャッシュにある PNG 画像を使用するだけです。ただし、以前に使用した SVG イメージ イメージをポイントすると、ブラウザー (Chrome 22) が新しい要求を作成します。サーバーは 304 (Not Modified) を返すため、新しいイメージをダウンロードする必要はありませんが、追加の処理が必要です。

これは、この jsFiddle で簡単にテストできます: http://jsfiddle.net/jtmuw/1/

$('button').click( function() {
  $('#a').attr('src', "myImage.svg");

  $('#b').attr('src', "myImage.png");
});

</p>

Chrome (または少なくとも Chrome v.22.0.1229.94) でフィドルを開いてネットワーク タブを開くと、2 つの画像が要求されていることがわかります。次に「画像の再読み込み」を数回押すと、ネットワーク タブに SVG 画像に対する複数のリクエストが表示されますが、PNG 画像に対するそれ以上のリクエストは表示されません。

私が知る限り、サーバーから同じヘッダーが返されているため、違いの理由はわかりません。

これは FF や Safari では見られないため、Chrome の問題である可能性があります。ただし、ヘッダーに欠落している根本的な違いがいくつかあるように感じます.ChromeがSVG画像を奇妙に扱っているだけではありません.

4

2 に答える 2

1

おそらく、Chrome に強制的にファイルをキャッシュさせることができます。w3schools は、次のようにこれについてかなり良い概要を持っています: http://www.w3schools.com/html/html5_app_cache.asp

基本的に、マニフェスト ファイルを作成する必要があります (それを "myCache.appcache" などと呼びます)。

CACHE MANIFEST
/path/to/svg/file.svg

次に、html ファイルでこれを次のように指定します。

<html manifest="myCache.appcache">

これにより、インターネットにアクセスできない場合でも、このファイルをキャッシュしてアクセスできるようにする必要があることが Chrome に通知されます。

于 2013-03-14T19:24:31.200 に答える