このページの本文へ

jQueryでロールオーバー!プリロード対応版 (3/3)

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 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています