2010年あけましておめでとうございます。

今年は少し開始が遅くなってしまいましたが、本日よりブログを再開させて頂きます。
今年もよろしくお願いいたします。

それでは早速、CSS2を使って簡単に画像のプレロードをするテクニックをご紹介。



次のようにCSS2の「content」プロパティにリソースを指定してあげることで先読みが可能のようです。

content: url(img01.jpg) url(img02.jpg) url(img02.jpg)

複数指定してもOKということみたいです。

対応ブラウザは以下となっています。

IE8+
FF2+
Safari 3+
Chrome 1+
Opera 9.62+

IE6,7は対応していませんが、<img> のようにして呼ばれた時に結局読まれるので、実装の仕方によっては注意が必要ですが、使えないということではないようです。

以下のエントリを参照してください。
Even better image preloading with CSS2 | The CSS Ninja - All things CSS, Javascript & xhtml

関連エントリ

• CSSだけで画像をプリロードするテクニック
• CSSとdivを使った画像先読みテクニック