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

【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！

以前この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;

}

さんぷる

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

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

スポンサードリンク

日時: 2006年6月22日 23:51
css

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

このエントリーのトラックバックURL: http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/350

トラックバック内容: » preloader.js - Ajax Image Preloader from BLOG × WORLD ENDING
画像をプリロードするにはDreamweaverのMM_preload()のようなJavaScriptを使った昔ながらの方法があったりCSSを使った方法が...; トラックバック時刻: 2007年4月20日 19:12

コメント

http://kikky.net/pc/form_type.html

BUTTONタグがあるのでclass、idにはbuttonという名称は使わないほうがいいと思います。

投稿者:hama | 2007年8月 9日 21:00

はじめまして、検索でたどり着いた通りすがりです。
参考になりました ;-)

投稿者:piro | 2007年11月11日 10:56