ロールオーバー画像がスムーズに現れない落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　ロールオーバーで差し替える画像の容量が大きいと、ロールオーバーしたときに画像がスムーズに現れない場合がある。これはユーザーがロールオーバーボタンにマウスをのせたときはじめて、ブラウザがロールオーバー用の画像を読込もうとするためである。ユーザーに気持ちよくWebサイトを見てもらうためには、そういった待ち時間をできるだけなくしたい。

　そんなときは、ロールオーバーで差し替える画像をあらかじめプリロード（先読み）しておけば、画像がキャッシュとして保存されるためロールオーバーをスムーズにすることができる。このプリロードのJavaScriptの記述方法はとても簡単だ。【1】のようなJavaScriptを＜head＞タグ内に記述し「src=”＊＊”」の「＊＊」の部分にプリロードしておきたい画像のURLを記述しておけばよい。

　また、このロールオーバー画像を使用するページがTOPページ以下のページであれば、あらかじめTOPページでそのロールオーバー画像をプリロードしておくという方法もある。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）