BLANKFIELD

※注意：この方法ではうまくいかないので、追記を読んでください。

phpspot開発日誌 : CSSだけで画像をプリロードするテクニックに習ってマウスオーバー時の画像（タイトルロゴとメニューの背景）を先読み、プリロードするようにしてみました。

みました。が、うまくいきません。なぜだ。なぜなんだ。

[追記]

.sidebar h3 a{
background: url(“/image/menuback.png”) no-repeat;
background-position: -9999px;
}

.sidebar h3 a:hover{
background-position: 0;
}

メニューのマウスオーバー時の背景画像は画面外に画像を置くことで解決しました。また、タイトルロゴの画像は、別のdiv要素でメニューと同じように画面外に表示することで解決しました。

[さらに追記 – 2009/07/09]

スラッシュドットにタレコまれてました。
ずいぶん前の話で、現在はマウスオーバーで画像が変わるようにはしていないのですが、一応。
問題点はリンク先を参照してもらうこととして、結局のところ僕はphpspotの方法ではうまくいかなかったので、この追記に書いた方法で画像のプリロードをたぶん解決しました。（うろおぼえ）
この方法というのは、上のほうにあるcssのとおり、hoverしていないときに背景画像を画面外に飛ばしておいて、hoverしているときにそれを画面内に配置するというものです。
画面外にある画像はロードされるのか？という疑問がありますが、当時はできてできたーなどと喜んでいた思い出があるので、だれか暇だったら検証しておいてください。
以上、2年ぶりの追記でした。