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

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

2006年04月27日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
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で面倒なことをせずに済みます。

関連の記事検索:CSS, Tips, JavaScript, Web制作, Webデザイン, HTML
スポンサード リンク

By.KJ : 2006年04月27日 12:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)