ウェブデザイナーの日記

cssで画像をプリロード

2006.11.26 04:11

cssで画像をプリロード

画像ファイルをプリロードしたいときがよくあります。プリロードっていうのは、つまり、htmlページがブラウザのキャッシュに読み込まれた時点でいっしょに読み込ませたいという意味です。オンマウスオーバーの代替画像とか。たいていはjavascriptでやるものでしょうが、かんたんなものなら、cssの方がお手軽です。プリロードしたい画像を次のようにcssで読み込ませちゃいましょう。

#image-preload{
width: 0px;
height: 0px;
display: inline;
background-image:url('画像へのurl');
background-image:url('画像へのurl');
background-image:url('画像へのurl');
}

画像はいくつでもオッケー。1行づつbackground-imageとして記述しましょう。んでもって、bodyのどこか、私はアクセス解析のタグの下なんかによく入れますが、どこでもよいのでこれを記述↓

<div id="image-preload"></div>

これでプリロードされる。ちょっとべんりだと思いませんか?ついでに書いとくと、オンマウスオーバーのリンクボタンをやりたかったら、このようにhtmlに書いとけばオッケーですね↓

<a herf="リンク先url"><img src="画像へのurl" onmouseover="this.src='代替画像へのurl'" onmouseout="this.src='画像へのurl'" /></a>

と書いといて、代替画像を上のやり方でプリロードさせる。という風にすれば、いちいちjavascriptの外部ファイルを書いたりしなくてもサクッとできるので、ちょびっとやりたいときなんかにはこっちの方がお手軽です。

ところで、マウスオンオーバーなんだか、オンマウスオーバーなんだか、どっちだったかいつもわからなくなります。これってトシ?

, , , ,

ウェブデザイナーの日記 [コメント (2) :: トラックバック (0) ]

このエントリーのトラックバックURL:
http://blog.3ot.net/ping/800

mayu (2008年09月09日 11:49)

この方法でやってみたところ、safariではバッチリなのですが、firefoxではうまくいきません。
両方の環境に対応しているようなものはありませんかー!?
もしご存知でしたら教えてください!お願いします。

ふじい (2008年09月09日 18:59)

こんちわ。そうですか!教えてくださりありがとうございます。私、それは気づきませんでした。大きな画像などをプリロードってあまりやらないものだから、サッと読み込んでしまうものだから気づかなかったです。いまパッと代替案を思いつきませんけど、なんかありそうですけどねー、んー、どうやったらいいかな。お答えにならなくてすません。なんか気づいたらまた書きます。