cssで画像をプリロードする方法（改

以前このblogで取り上げたcssのみで画像をプリロードする方法ですが、実は画像のプリロードが全くできてませんでした(汗

参考にされた方すみませんでした。
また、記事のアイデア元であるPHPSPOT(Specere Blogs)の方法でもプリロードはできません。キャッシュフォルダを見ながら検証いたしました。(IE6)

ともにカスケーディングの仕様を誤解しての発想だったようです。
cssプロパティはカスケーディング(スタイルの上書きの事です)を行いますがブラウザが解釈するのは最後のプロパティです。ので、同じプロパティを複数カスケーディングしても有効になるのは最後のみでした。

さてリベンジということでcssで画像をプリロードする方法（改をご紹介します。

cssで画像をプリロードする方法（改

(x)htmlに記述するコード

<img src="読み込みたい画像" width="0" height="0" class="preload" />
<img src="読み込みたい画像" width="0" height="0" class="preload" />
<img src="読み込みたい画像" width="0" height="0" class="preload" />
<img src="読み込みたい画像" width="0" height="0" class="preload" />

cssに記述するコード

img.preload{
	display:none;
}

さんぷる

img要素で画像を読み込みそれをcssで非表示にしてきます。また、cssがoffのユーザーも考慮してwidth属性とheight属性にともに0を入れています。

これで簡単にプリロードはできますが
これではありきたりだし、ソースが汚くなるのでもうひとつ。(こちらがお勧めです。)

cssで画像をプリロードする方法（改　２

(x)htmlに記述するコード

<p class="button"><a href="#">sample</a></p>

cssに記述するコード

p.button{

	background:url("img01/a_img.gif") no-repeat;

}

p.button a{

	display:block;

	width:200px;

	height:50px;

	background:url("img01/b_img.gif");

	text-indent:-9999px;

}

p.button a:hover{

	background:none;

}

さんぷる

つまり事前に読み込んでいた画像をマウスオーバーの際に表示するのではなく、
２つの画像を重ねておいてマウスオーバーの際に上の画像を消すというやり方です。

このやり方だとインターネットオプションでインターネット一時ファイルの設定をページを表示するごとに確認するとしている方（つまりプリロードできない環境の方）でもちらつきなくロールオーバー処理を行う事ができます。

関連エントリー

一番簡単な画像置換の方法-imageReplace.js-
画像置換でメニューを作る
画像置換
BIR-もうひとつの画像置換

スポンサードリンク

«戻るボタンの実装方法について | メイン | 単一の要素に複数のclassを設定する方法»