前の記事 «:PHP最新版にバッファオーバーフローの脆弱性
次の記事 »:リンク位置を視覚的に表示するライブラリ

CSSだけで画像をプリロードするテクニック

2006年04月27日

スポンサード リンク
Specere Blogs Blog Archive A Simple CSS Image preloading technique

So you need to pre-load images, but don’t want to deal with javascript or complicated workarounds. What do you do? The solution is simple. All we need to do is designate a CSS style with multiple background-images. As your browser reads the style, it will load each image you designate in succession, thus pre-loading your images. Below is an example of the CSS:

JavaScriptなしに、CSSだけで画像をブラウザにプリロードさせるテクニック。
まず、次のようなCSSを定義します。

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
       background-image: url(path/to/image3.png); /* 読ませたいイメージ3 */
       background-image: url(path/to/image4.png); /* 読ませたいイメージ4 */
}

そして、次のようなタグをHTMLに記述しておく。

<div id="preloadedImages">< /div>

これだけでOK。
なるほど、divを読み込んだ時点でブラウザが画像を読み込みに行ってキャッシュしてくれるわけですね。

JavaScriptで面倒なことをせずに済みます。

スポンサード リンク

投稿者 KJ : 2006年04月27日 12:08 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。