回線の細いスマフォサイトでは、極力サーバとのコネクション数を減らし、速やかにページを表示させたいものです。 そこで、HTML5でのローカルストレージを使った、画像キャッシュを行う jQuery Pluginを作りました。

サーバ側でキャッシュ有効期限を設定しても、画像１つづつにコネクションを張りトータルの接続時間がかかります。スマフォサイトだと、manifest書けばという話もあるが、これはこれで強力すぎるキャッシュ機構でもあり、サーバ側で反映した変更が即時サイトに反映されないと、運用要件として難しい事もあると思います。

下記スクリプトを使用すれば、manifestを使わなくても画像データを完全にオフライン化できます。

使い方

HTMLのHEAD部分で下記スクリプトを書く。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.storagecache.js" type="text/javascript"></script>

ストレージキャッシュしたい画像を下記のように書いて下さい。 但し、Ajaxのクロスドメイン制約から、他ドメインのイメージソースは使用できませんので、同サーバの画像を指定して下さい。

<img cache_src="./images/banner.gif" alt="this is banner!" width="90" height="45" />

HTMLの呼び出しが完了した時点で、下記スクリプトを実行。

$(function(){
  $('img[cache_src]').storagecache();
});

ダウンロード

こちらからダウンロードして下さい。