[JS] 外部ファイルの遅延読み込みを容易にする「PreloadJS」

Webコンテンツ制作において、JavaScriptで外部ファイルの読み込みを実現する機会は多々あり、そして中でも外部画像の遅延読み込みとその状況に応じたハンドリングについては、時代の流れもあって最近では特に需要が高まっていると感じます。が、実際、ブラウザ間の差異などの問題もあって、そのあたりをうまく実現しようとすると、結構面倒な処理が必要だったりします。

先日、Webにおけるインタラクティブコンテンツの制作を強力にサポートする「CreateJS」の公式サイトが公開されました。「CreateJS」はグラフィックス、アニメーション、サウンドなどの用途に特化した各種JavaScriptライブラリやツールによって構成されていますが、その中でも個人的にまず興味を持った(今すぐ使えそうだと思った)のが、外部ファイルの読み込みを容易に実現するためのライブラリである、表題の「PreloadJS」です。

「PreloadJS」はCSS、画像、JS、JSONなどなど様々なファイルの読み込みに対応しており、複数キューの管理とその一時停止/レジュームなどの便利な機能が色々と用意されいています。また、画像の読み込みに関しては、XMLHttpRequest level2(XHR2)によるローディングと、古くからあるタグを使ったローディングを環境によって内部的に切り替えるため、XHR2対応環境では(タグによるローディングでは実現できない)読み込みのより詳細な進捗状況を取得することができます。もしかしたら他に同等の性能を持つライブラリがあるのかも知れませんが、僕はこれが初見でしたので、この仕様に特に強く惹かれました。

機能自体は外部ファイルを読み込むというシンプルなものですから、使用方法も簡単。JSの基礎知識とドキュメントさえあれば迷うことは無さそうです。
以下は外部画像を読み込む場合のシンプルな例。

// 読み込む画像のリスト
var manifest = [
	{src: 'images/image0.jpg', id: 'img0'},
	{src: 'images/image1.jpg', id: 'img1'},
	{src: 'images/image2.jpg', id: 'img2'},
	{src: 'images/image3.jpg', id: 'img3'}
];

// 全体の読み込み進捗状況
var overallProgresssHandler = function( e ) {
	console.log( 'loading: ' + Math.floor( e.loaded ) * 100 + '%' );
};

// 全体の読み込み完了
var completeHandler = function( e ) {
	console.log( 'complete.' );
};

// ファイルごとの読み込み進捗状況
var fileProgressHandler = function( e ) {
	console.log( e.id + ' loading: ' + Math.floor( e.progress ) * 100 + '%' );
};

// ファイルごとの読み込み完了
var fileLoadHandler = function( e ) {
	console.log( e.id + ' is Loaded.' );
};

var preload = new PreloadJS();
preload.onProgress = overallProgresssHandler;
preload.onComplete = completeHandler;
preload.onFileProgress = fileProgressHandler;
preload.onFileLoad = fileLoadHandler;
preload.loadManifest( manifest );

↑PreloadJSインスタンスを作ってハンドラをセットし、loadManifest()に読み込みたい画像の配列を渡して呼び出す。画像ファイルごとにid(String)やdata(Object)といったメンバを持たせたObjectを格納すれば、各ハンドラに渡されるイベントオブジェクトからそれらの値を取得できます。

var manifest = [
	'images/image0.jpg',
	'images/image1.jpg',
	'images/image2.jpg',
	'images/image3.jpg'
];
～

↑特にデータを関連付ける必要がない場合は、単純にパスの文字列を格納した配列でもいいですし、

～
preload.loadFile( 'images/image0.jpg' );

↑ファイルがひとつだけならloadFile()にURLを文字列で渡せばOKみたいです。

自分自身まだ「ちょっと使ってみた」程度で、その他の細かいところなどについてはこれから把握していくところなのですが、遅延読み込みの諸問題を吸収しつつ多機能で扱いやすいAPIを提供してくれる「PrelaodJS」は自分が求めていたものに非常に近く、スピードとクオリティを求められる実務においてもとても重宝しそうだと個人的に思ったので、ありがたく使わせて頂こうと思っています。なんか偉そうですね。すいません。

とりあえず、今まで使っていた自作のなんか変なクラスみたいなやつは、もっとJSに対する深い知識が付いた頃に改めて作り直そうかな…。(‘A’;)

Tweet