普段は画像置換+CSS Spriteでロールオーバーをやっつけています。リクエストが少ないし、CSSだけなので、高速です。

でも、画像の差し替えなどは若干手間なのでメンテナンス性などを考えたときはJavascriptで実装した方が良い場合もあったり。
ただ、javascriptで普通にsrcを書き換えると、そこから画像のダウンロードが始まるので、マウスオーバーとのタイムラグが発生したりで、どうも頂けない。

そんなわけで、jQueryでプリロード付のロールオーバーを実装するスクリプトを書いてみました。

[js]
jQuery(function(){
var supfix = "_on";
$("img.rollover").hover(
function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+supfix+"$2"));
},
function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
}
).each(
function(){//preload
$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+supfix+"$2"));
});
});
[/js]

使い方

ロールオーバーさせたいimgタグにrolloverクラスをつけるだけです。
img.gifにマウスオーバーすると、img_on.gifに変わります。
supfixの値を変更すれば”_on”以外のものでも使えます。

[html]
<img src="img.gif" alt="" class="rollover" />
[/html]

jQueryの$()とかjQuery()ってセレクタを入れてjQueryオブジェクトを取得するだけのものと思いがちですが、中身にHTML文字列をぶち込んであげることで、非表示のjQueryオブジェクトを作成できるんですよね。

jQuery(html, [ownerDocument]) – jQuery 日本語リファレンス

良く$.ajaxで取得したHTMLから要素をDOMエレメントを作成してappendするような使い方をします。

これを活用して、画像のプリロードを実現している訳です。
まぁ、それでも、読み込まれて実行されるまでは使えないので、そこら辺はCSSの方が強いですね。また、Jsの実行速度や、読み込むスクリプトの量にも左右されると思うので何でもかんでもjsでって訳にはいかないですね。そこら辺は使い分けましょう。