後で利用する画像を前もって読み込むロールオーバー画像やスワップ画像のように、後で表示する画像を前もって読み込んでおくことでスムースな演出が実現できます。ここではjQueryを利用した画像のプリロードについて説明します。解説プリロードしないサンプルまずはプリロードしないサンプル(preload/01.html)を確認します。ソースを開いてbody内にbutton要素とdiv要素があることを確認してください。cssメソッドを利用してdiv要素の背景画像を「preload.png」に変更します。プリロードの機能が確認しやすいように「preload.png」は958kbと大きめのファイルサイズとなっています。$("button").click(function(){$("div").css("background-image","url(preload.png)");});このサンプルでは画像をプリロードしていないため、buttonをクリックすると徐々に画像が表示されていきます。プリロードしたサンプル次にプリロードするサンプルを確認します。画像は同じ「preload.png」を利用するので、キャッシュファイルをクリアしておいて下さい。それではサンプル(preload/02.html)のソースを開いてbody内の構成はpreload/01.htmlと同じ事を確認してください。jQueryは以下の1行が追加されているだけです。attrメソッドでimg要素のsrc属性を設定することで実現します。)内にセレクタではなく「imgタグ」が設定されていますが、このように記述するとhtml要素を作成する事ができます。)※urlは文字列として指定するのでクォートが必要です。結果として、buttonをクリックするとすぐに画像が表示されます。プリロードが完了する前にbuttonをクリックすると意味が無いので、プリロードを確認するために少し待ってからbuttonをクリックして下さい。メモ汎用的なプリロードfunctionプリロードしたい画像は大抵の場合、複数あります。各画像ごとに1行追加するのは効率が良くないので、複数の画像を引数で指定する汎用的なプリロードfunctionを作成してみました。サンプル(preload/test01.html)には以下の様にpreloadFuncが作成されています。arguments[i]);}}このfunctionでは2行目のfor文で「渡された引数の数だけ(arguments.length)」繰り返し処理をするようにしています。3行目で画像のプリロードの構文を利用して、画像をプリロードする仕組みになっています。利用方法は以下の様に、引数にプリロードする画像のurlを設定するだけです。サンプルpreload/test01.htmlでは1つしか画像を設定していませんが、カンマで区切って複数設定することができます。)※各画像のURLは文字列として指定するのでクォートが必要です。次回はjQueryの負荷を軽くし、高速に処理するテクニックを紹介します。