Web制作の現場で使えるjQuery　UIデザイン入門 ― 第17回

jQueryでロールオーバー！プリロード対応版

2009年10月29日 14時00分更新

文● 西畑一馬／to-R

画像のプリロード（先読み）処理を追加する

　ロールオーバーで画像を変更する際、src属性を書き換えてからブラウザーが画像をダウンロードして表示するまでには僅かとはいえ時間がかかります。そのため、画像の切り替え時に一瞬、チラつきが発生する場合があります。チラつきを防ぐために、画像をあらかじめダウンロードしておき、ブラウザーにキャッシュさせておく「プリロード」（先読み）の処理を追加します。

　サンプル02にプリロード処理を加えたのが次のスクリプトです。

▼サンプル03（スクリプト部分）


$(function(){
    $("img.rollover").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    }).mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
    }).each(function(){
        $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    })
})

　.each以降が追加部分です。each(function(){...}) は、セレクターで指定した要素に含まれる要素を1つずつ取り出して、{...}内の処理を繰り返し実行する命令でした（関連記事)。

　function(){...}の中には、$("<img>") という見慣れない記述方法があります。jQueryでは　$("....")内にHTMLを記述すると、HTMLを「内部的」に作成します。内部的に作成されたHTMLは、HTMLを操作する命令（関連記事）を使用しないとブラウザー上に表示されません。

　今回はプリロードしたいだけですからブラウザーに表示する必要はなく、内部的にHTMLを作っておくだけで十分です。作成するimg要素のsrc属性にはattr()を使い、ロールオーバー後の画像のファイル名（元画像のファイル名に「_on」を付けたもの）を設定します。ここまでの処理が、each()によってclass属性「rollover」を持つimg要素すべてに適用され、ロールオーバーに使う画像のプリロード処理を実現できます。

著者：西畑一馬（にしはたかずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。

前へ 1 2 3 次へ

ツイートする

カテゴリートップへ