CreateJSで遊んでみる 3日目 PreloadJS

3日目 PreloadJS

PreloadJSはファイルの先読みを行って、
読み込み状況を把握したり、完了後に処理を実行させたりといった処理をサポートしてくれるCreateJSのライブラリ群の一つです。

EaselJSなどと組み合わせずとも単体でも利用することができます。

予めPreloadJSをHTMLのheadタグ内で読み込んでおきます。
現時点での最新版0.3.0を利用します。

http://code.createjs.com/preloadjs-0.3.0.min.js

LoadQueueクラスのインスタンスを作成する

PreloadJSを利用するにはまずLoadQueueクラスのインスタンスを作成して、
変数に代入しておきます。

var preload = new createjs.LoadQueue();

PreloadJSはデフォルトではXHRでファイルを読み込もうとします。
そのため、別ドメインの画像などを読み込もうとすると、
JavaScriptのクロスドメイン制約によってするとエラーになってしまいます。

なので、

クロスドメイン制約によるエラー

上の画像のようなエラーがでます。

外部ドメインの画像などをリクエストする場合は、
LoadQueueクラスにfalseを渡します。

var preload = new createjs.LoadQueue(false);

こうすることで、読み込み方が変更され、
従来のJavascriptでタグのDOMを作って、
先読みを行う方法に変更されます。
(ただし、タグを作れないファイル…JSON,XMLなどの場合はXHRでの読み込みになる。)

先読みするファイルを指定、読み込みを開始する

次にこのインスタンスを使って読み込むファイルを渡します。
以下のような3通りの形で書くことが出来ます。

preload.loadFile("cat.jpg");
preload.loadFile({id:"mike", src:"cat.jpg"});
preload.loadManifest([{id:"mike", src:"dog.jpg"}, {id:"mike", src:"cat.jpg"}];

一番目の方法は引数に指定されたファイルのURLを読み込む一番シンプルな書き方です。

二番目の方法はオブジェクトを渡しています。
srcでファイルのURLを渡す他にidを割り振る事ができます。
これによって、上の例で言うとcat.jpgをmikeというidで呼び出して使うことも出来るようになります。
id以外にもdataプロパティで任意のオブジェクトを関連付けることもできるようです。

三番目の方法はメソッド名が変わっています。
loadManifestは1番目、2番目で書いたものを配列として一度に渡すことができます。
これによって、ここで指定したファイルを全て読み込んでくれるようになります。

loadFileもloadManifestも実行された時点で読み込みが開始されます。
もし任意で読み込むタイミングを指定したい場合は、
それぞれの第二パラメーターloadNowをfalseに設定します。
任意のタイミングでloadメソッドを実行して読み込みを行います。

queue.loadFile("cat.jpg", false);
queue.load();

イベントを使って読み込み状況を把握したりや完了後に処理を開始させる

PreloadJSには便利なイベントが用意されています。
これらを使うことで、読込状況をプログレスバーで表示するといった処理や、
全ての読み込みが完了した後に表示を行う…
などといった処理が簡単に扱えるようになります。

読み込みが終わったファイルをJavaScript中で利用する

読み込みが終わったファイルはgetResultで取得するか、
読み込み完了のイベントの引数で渡される値からファイルの情報をとりだして扱うことができます。

全てのファイルの読み込みが完了すると、
completeというイベントハンドラが呼ばれるので、
addEventListenerでcompleteを指定して、
読み込み終了後に読み込んだファイルをbodyに追加する処理を書いてみます。

var minifest = "cat.jpg";
var preload = new createjs.LoadQueue();
preload.loadFile(minifest);

preload.addEventListener("complete",function(e){
document.body.appendChild(preload.getResult("cat.jpg")); //画像をimgタグに埋め込んでbodyに追加している。
});

getResultは、引数に読み込み終わった画像のURL、
またはオブジェクトとして渡したidを渡すことで
DOMを生成して返してくれます。

例えば画像であればimgタグを作って返してくれます。

これをappendChildで追加してあげれば表示させることが出来ます。

また、addEventLiastenerで発火したメソッドが受け取っている
引数の中にはurlや判別されたファイルの種類、
preload.loadFileで設定したid、dataプロパティが入っているので、
これらを利用することもできます。