jQuery入門講座使い方-画像のプリロード

画像のプリロード

要素を動的に追加する

画像のプリロードは、要素を動的に追加するテクニックの延長上にあります。ですので、まずは要素を動的に追加する処理について説明します。

新しく要素を追加するためには、要素をjQueryオブジェクトにする必要があります。サンプル（04/02_01.html）を開いてjQueryを確認して下さい。ポイントは以下の様にセレクタにタグを設定する点です。空のdivでは追加されたことが分からないのでtext(val)メソッドを利用して「div!」と文字を入れておきます。１章のメソッドと返値で説明したようにtext(val)メソッドは返値でjQueryオブジェクトを返す（ここではdiv!と文字の入ったdivにです）ので、それを変数newDivに入れました。

$(function () {
	var newDiv = $("<div>").text("div!");
});

これだけでは要素は追加されません。次にどこに追加するかを指示する必要があります。サンプル（04/02_02.html）を開いてjQueryを確認して下さい。要素を追加するためにはappend(val)メソッドを利用します。これは前回も利用しましたが、引数には文字だけでなくjQueryオブジェクトも設定できるのです。

$(function () {
	var newDiv = $("<div>").text("div!");
	$("body").append(newDiv);	
});

このサンプルではセレクタでbodyタグを指定しているので、bodyタグ内に要素が追加されます。ソースを確認するとbody内には何もないのに拘わらず、サンプルを開くと「div!」と表示され、divが尽かされていることが確認できます。要素を表示するためにはappendメソッドが必要なことを忘れないで下さい。

要素の修飾

追加する要素にはテキストだけでなく、様々な設定を行うことができます。サンプル（04/02_03.html）を開いてjQueryを確認してください。以下の様にサンプル04/02_02.htmlのソースにメソッドチェーンでaddClassを追加設定しています。

$(function () {
	var newDiv = $("<div>").text("div!").addClass("startButton"));
	$("body").append(newDiv;	
});

head内にcssでstartButtonクラスの設定がされているため、ブラウザを確認するとcss設定により青地に白でdivと表示されるようになりました。

さらにイベントも追加できるのですが、ver1.7ではライブ機能が備わったonがあるのでほとんど必要ありません。ですが参考にサンプルを用意しました。サンプル（04/02_04.html）を開いてjQueryを確認してください。以下の様にclickイベントもメソッドチェーンでつなげることができるのです。

function alertFunc(){
　alert("click!");
}		
$(function () {
　var newDiv = $("<div>").text("div!").addClass("startButton").click(alertFunc);
　$("body").append(newDiv);	
});

ちなみにonでクリックイベントを追加したサンプル（04/02_05.html）も用意しました。文字量が多くなりますがライブの機能があるので、後から追加された要素にも反応します。ですからdivを作成する時にイベントを設定する必要はありません。

appendToメソッド

これまでのサンプルではappendメソッドを利用しましたが、これと似た機能をもつappendTo(val)メソッドを利用すると、よりシンプルに記述できるので紹介したいと思います。appendToメソッドは追加したい要素（jQueryオブジェクト）に対して利用できるメソッドで、引数に追加先の要素を指定します。

サンプル（04/02_06.html）を開いてjQueryを確認してください。以下の様に作成した要素を修飾した後、最後のメソッドチェーンでappendToを利用します。これで作成し修飾された要素が引数で指定したbodyタグに追加されます。

$(function () {
	$("<div>").text("div!").addClass("startButton").appendTo("body");
});

最初はjQueryオブジェクトを利用して要素を追加することを確認しやすいようにappendメソッドを利用しました。しかしメソッドチェーンに慣れているなら、appendToメソッドを利用した方がシンプルになります。

画像のプリロード

では本題の画像のプリロードです。まずはプリロードしないサンプル（04/02_07.html）を開いてjQueryを確認してください。

このサンプルではstartButtonのdivをクリックしたらcssメソッドを利用してphotoAreaのdivの背景に画像（preload.png）を表示するサンプルです。プリロードの機能が確認しやすいようにpreload.pngは958kbと大きめのファイルサイズとなっています。そのためクリックしてもすぐには表示されず、徐々に画像が表示されていくのが確認できます。

$("#startButton").click(function(){
	$("#photoArea").css("background-image","url(images/preload.png)");
});

次のサンプルもpreload.pngを利用するのでブラウザのキャッシュをクリアして下さい。サンプル（04/02_08.html）を開いてjQueryを確認しましょう。要素を追加するテクニックで、divではなくimgの要素を作成しています。attrメソッドを利用すると要素の属性を指定できるので、ここではsrc属性にプリロードしたいpreload.pngのパスを記述します。

$("<img>").attr("src", "images/preload.png");
$("#startButton").click(function(){
	$("#photoArea").css("background-image","url(images/preload.png)");
});

appendするとページ内に画像が表示されてしまうのでappendしていないことを確認してください。画像を含む要素のjQueryオブジェクトを作成しただけでも画像の読み込みがされるのです。
実際にサンプル（04/02_08.html）で青いdivをクリックすると、すぐに画像が表示されプリロードされていることが確認できます。

ただしプリロードが完了する前にクリックすると機能しません。Flashコンテンツなどのようにプリロードが完了するまでコンテンツを表示しないようにする仕組みについては、別の機会に説明したいと思います（たぶんサンプルページでの掲載）。

汎用化

コンテンツでは複数の画像をプリロードする必要があるので、より汎用的に利用できるようにします。サンプル（04/02_09.html）を開いてソースを確認してください。新しくpreloadFuncが作成されており（以下のソース2〜6行目）、この中でプリロードの処理を行います。プリロードしたい画像はコンテンツによって数量が変わるのでargumentsを利用して、引数の数だけfor文で繰り返すようにしました。

//---プリロード用のfunction	
function preloadFunc() {
	for(var i = 0; i<arguments.length; i++){
		$("<img>").attr("src", arguments[i]);
	}
}
		
$(function () {
	preloadFunc("images/preload.png");//---プリロードの実行
	$("#startButton").click(function(){
		$("#photoArea").css("background-image","url(images/preload.png)");
	});
});

あとは9行目のようにプリロードしたい画像のパスをpreloadFuncの引数に設定するだけです。サンプルでは引数は１つだけですが、複数の引数を設定してもＯＫです。

これでプリロードの説明は終わりです。次回はセレクタの自作について説明したいと思います。

次のページ：セレクタを自作する(1)