3

ColdFusion 10 と jQuery 1.7.1 と Bootstrap を使用しています。

ホームページに大きくて高品質の画像がたくさんある Web サイトを開発しています。ホームページには、データベースから 10 個の高品質の画像を取得する画像カルーセルがあります。画像はそれぞれ 1 メガです。カルーセルの画像は (今のところ) 私の問題ではありませんが、何か関係があります。

私が今対処しようとしている問題は、引き続き使用したい高品質の背景画像を使用していることです。それは約 180k です。ホームページのキャッシュに背景があれば、それを使いたいです。そうでない場合は、ホームページで使用したくありません。別のページからロードします。ユーザーがホームページに戻ったときに背景画像がキャッシュにある場合は、それを使用したいと思います。

画像が既にキャッシュにあるかどうかをテストできますか? もしそうなら、それに基づいて動的にロードするかしないかをテストできますか?

ホームページはこちらからご覧いただけます：

http://flyingpiston2012-com.securec37.ezhostingserver.com/
4

2 に答える 2

1

画像がブラウザのキャッシュにあるかどうかをテストする方法はないと思います。

ただし、この問題を解決できる 1 つの方法は、jQuery の .load() eventを使用することです。画像がロードされたら、画像 ID (またはファイル名) を localStorage (または Cookie) に入れます。次に、この変数をテストして、イメージがロードされているかどうかを確認できます。

画像に localStorage 変数を設定する例:

$(document).ready(function () {
   $('.hiResImg').load(function () {
      var imgSrc = $(this).attr('src');
      var loadedImgs = localStorage.getItem("loadedImgs");

      loadedImgs = loadedImgs || [];

      loadedImgs.push(imgSrc);

      localStorage.setItem("loadedImgs", loadedImgs);
   });
});

イメージのテストと読み込みの例:

$(document).ready(function () {
   var loadedImgs = localStorage.getItem("loadedImgs").split(',');

   var imagePath = "http://localhost/path/to/someImg.jpg";

   if ($.inArray(imagePath, loadedImgs) > -1) {
      $('body').css('background-image', 'url(' + imagePath + ')');
   }
});

注: このコードは完全にはテストされていません。

于 2012-08-14T05:14:20.147 に答える
0

必要なブラウザのサポートによってオプションになる場合とそうでない場合がありますが、DataURL を使用してブラウザの localStorage に保存できます。

このトピックを扱った Mozilla の記事は次のとおりです。

また、localStorage にはサイズ制限があることにも注意してください。これは通常、特定のドメインで 5MB だと思います。これは 180 KB の背景画像では問題になりませんが、ブラウザの設定やドメインの他のページ/サイトによっては、問題になる可能性があります。

于 2012-07-06T18:10:36.830 に答える