初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

画像のプリロード

概要

後で利用する画像を前もって読み込む

ロールオーバー画像やスワップ画像のように、後で表示する画像を前もって読み込んでおくことでスムースな演出が実現できます。ここではjQueryを利用した画像のプリロードについて説明します。

解説

プリロードしないサンプル

まずはプリロードしないサンプル（preload/01.html）を確認します。ソースを開いてbody内にbutton要素とdiv要素があることを確認してください。 

<button>click</button>
<div></div>

jQueryは以下の様に記述され、buttonをクリックすると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行が追加されているだけです。 

$("<img>").attr("src", "preload.png");
$("button").click(function(){
	$("div").css("background-image","url(preload.png)");
});

jQueryではプリロードの構文は以下の様になっており、attrメソッドでimg要素のsrc属性を設定することで実現します。オブジェクトの部分では$( )内にセレクタではなく「imgタグ」が設定されていますが、このように記述するとhtml要素を作成する事ができます。→リファレンス：jQuery(html)

画像のプリロード
$("<img>").attr("src", "プリロードする画像のurl" )
※urlは文字列として指定するのでクォートが必要です。

結果として、buttonをクリックするとすぐに画像が表示されます。ただしプリロードが完了する前にbuttonをクリックすると意味が無いので、プリロードを確認するために少し待ってからbuttonをクリックして下さい。

メモ

汎用的なプリロードfunction

プリロードしたい画像は大抵の場合、複数あります。各画像ごとに1行追加するのは効率が良くないので、複数の画像を引数で指定する汎用的なプリロードfunctionを作成してみました。サンプル（preload/test01.html）には以下の様にpreloadFuncが作成されています。 

function preloadFunc() {
	for(var i = 0; i< arguments.length; i++){
		$("<img>").attr("src", arguments[i]);
	}
}

このfunctionでは2行目のfor文で「渡された引数の数だけ（arguments.length）」繰り返し処理をするようにしています。そして3行目で画像のプリロードの構文を利用して、画像をプリロードする仕組みになっています。

利用方法は以下の様に、引数にプリロードする画像のurlを設定するだけです。サンプルpreload/test01.htmlでは1つしか画像を設定していませんが、カンマで区切って複数設定することができます。 

preloadFunc("preload.png");
preloadFuncの使い方
preloadFunc("画像URL", "画像URL", "画像URL", … )
※各画像のURLは文字列として指定するのでクォートが必要です。

次回はjQueryの負荷を軽くし、高速に処理するテクニックを紹介します。