5

jQuery で読み込まれた画像は、Google Chrome のキャッシュに保存されませんか? 毎回サーバーからダウンロードします。

状況: jQuery slimbox2 を使用して「ライトボックス」に画像をロードしています。この時点では特に何もありません。マウス カーソルがライトボックスの画像の上に移動したことを検出する jQuery コードをいくつか追加しました。これが発生すると、ライトボックスの画像のバージョンを動的に読み込みますが、div の css バックグラウンドを変更することで (ズームのように) 大きくなります。

問題: カーソルが初めてライトボックスに入ると、「大きな」画像が読み込まれるはずで、すべてのブラウザーで画像がキャッシュに保持されるため、カーソルが消えて 2 回目に入ると、「大きな」画像が読み込まれます。 ' 画像は既にダウンロードされているため、ダウンロードに一瞬も 1 秒もかかりません。

Chrome では、毎回何度も何度もダウンロードされます。（ライトボックスのページネーションレイヤーのmousein mouseoutイベントにより、この余分なダウンロード=画像が常にフリックするため、さらに問題があります[画像のダウンロード]）。

例: 私の英語はとても残忍で、遅いです。理解するために例をチェックしてください:) http://motocross.es/f/oneal/casco-oneal-7-series-mayhem-roots/996

事前に感謝し、私の英語レベルを許してください。

4

2 に答える 2

3

これは、画像とともに送信されたヘッダーがキャッシュについて何も言っていないためだと思います。つまり、画像の URL:

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

...これらのヘッダーで画像を提供します。

  HTTP/1.1 200 OK
  Date: Sat, 16 Mar 2013 10:00:13 GMT
  Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6
  Content-Length: 79741
  Keep-Alive: timeout=3, max=1000
  Connection: Keep-Alive
  Content-Type:

画像をキャッシュする方法については何も言いません。たとえば、メイン ページの基本的な小さい画像と比較してください。

http://motocross.es/upload/shop/vendedores/44/productos/standard/cropped_ref_44_1szyh6a9s5mh3ixc.jpg

...ヘッダーは次のようになります。

  HTTP/1.1 200 OK
  Date: Sat, 16 Mar 2013 10:00:42 GMT
  Server: Apache/2.2.21 (FreeBSD) mod_ssl/2.2.21 OpenSSL/0.9.8q DAV/2 mod_fastcgi/2.4.6
  Last-Modified: Fri, 08 Mar 2013 03:04:33 GMT
  ETag: "2726d07-d1c9-4d761151f1240"
  Accept-Ranges: bytes
  Content-Length: 53705
  Cache-Control: max-age=1296000, public, must-revalidate
  Keep-Alive: timeout=3, max=1000
  Connection: Keep-Alive
  Content-Type: image/jpeg

追加のキャッシング手順を参照してください。そこCache-Controlには、おそらく重要な部分であるヘッダーと、ETag などの他のキャッシュ情報があります。Content-Type他の手がかりがない場合、ブラウザのキャッシュ戦略がコンテンツタイプに関連している可能性があるため、関連する可能性のあるもあります。

URL:

http://motocross.es/ajax/shop.ajax.original_pic.php?file=ref_44_1szyh6a9s5mh3ixc.jpg

…当たる？つまり、サーバーもコードを終了しますか? その場合は、適切なCache-ControlヘッダーとContent-Type. サーバーを制御する場合、画像がブラウザによってどのようにキャッシュされるかはほとんどあなた次第です。

于 2013-03-16T10:06:41.547 に答える
0

それらをローカル・ストアibm.com localstorage exampleに保管してみてください

<script>
    var hero;
    if ( localStorage.getItem('heroImg')) {
        hero = localStorage.getItem('heroImg');
    }else {
        hero = '/9j/4AAQSkZJRgABAgAAZABkAAD/7    /.../    6p+3dIR//9k=';
        localStorage.setItem('heroImg',hero);
    }

    document.getElementById("hero-graphic").src='data:image/png;base64,' + hero;
</script>

<img id="hero-graphic" alt="Blog Hero Image" src="" />
于 2013-03-16T09:58:12.337 に答える