Preload :hover images in CSS を検証してみた

始めに断っておくけど、このエントリは Tips でもなく何のためにもならないもんです。ちょっと気になっていた記事があって検証してみたら、「チッ、使えないじゃん」ってオチだったんだけど、一応書き残しておこうかなってレベルのもんです。しかも、前置き長いし。

CSS を使ったロールオーバー

CSS の :hover 疑似クラスを使って、要素の背景画像を切り替えてロールオーバーの効果を出すってのは今や珍しくもなんともない。例えば、下記のような指定をしたとしよう。

a { background: url(normal.png) center left no-repeat; }
a:hover { background: url(hover.png) center left no-repeat; }

上記例のようにノーマル時とマウスオーバー時の画像を別々にしていると、マウスオーバーした時に hover.png を読み込みにいくため、通信環境によっては若干待たされる場合があるわけだ。そこで、解決方法としてノーマル時とマウスオーバー時の画像を一つにしてしまい、マウスオーバー時に位置をずらしてやるってのが一般的。

• hover.html

CSS の指定で画像を先読みできるのか検証

ここからが本題。理由は分からないけど、どうしても画像は一つにしたくないって時に、マウスオーバー用の画像を先読み出来たら素晴らしいじゃないっすか。んで、前に見つけて気になっていたのが下記の記事。

• maratz.com » archive » Preload :hover images in CSS

このサイトで紹介されている、画像先読みさせるためのメソッドってのは下記の通り。

a,
a:hover,
a:focus { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }

拙記事「リンクに関する疑似要素の記述順」でも紹介したことがあったけど、これじゃ上手く動作しないよ、ママン。そこで、ちょっと記述を変えて調べてみた。

a { background: url(hover.png); }
a:link,
a:visited { background: url(normal.png); }
a:hover { background: url(hover.png); }

• preload.html

一番最初に a 要素で hover.png を呼び出して、その後の指定で上書きしてくれることを想定している。んで、キャッシュを見ながら検証してみたんだけど、残念ながら hover.png は先読みしてくれなかった。ファイルにアクセスした段階では、normal.png しか読み込まれていない。うーん、ダメかーっつうことで、引き続き調べてみようと思ってる。