PreloadJSの簡単な使い方
こんにちは、橋本です。
最近は毎日CreateJSと戯れる日々を過ごしております。
今回 はそんなCreateJSファミリーの一つ、PreloadJSの使い方について書いてみたいと思います。
そうです。自分のための備忘録ですね。
そもそもPreloadJSとは何かといいますと、CreateJSファミリーの一つで、画像などの後読みを簡単に行うためのライブラリです。
必要なファイルを必要になったときに読み込むようにすることで、Webアプリの初期読み込みを早くすることができます。
とくにスマホ向けのWebアプリを作る際には、初期読み込みを如何に早くするかがポイントになってくるかと思いますので、そういったときに非常に有益なライブラリかと思います。
詳細は公式ページを御覧ください。
さて、前置きはこのへんにして、早速使い方を見て行きましょう。
当然の話ですが、PreloadJSを使うためには、PreloadJSをどこかから持ってこなければいけません。
PreloadJSを手元にDLして使いたい場合には、GitlabからDLしてきて使ってください。(Tags · CreateJS/PreloadJS · GitHub)
DLするのめんどくさいよ−！という人は、CDNが用意されているので、そちらを利用するといいと思います。
自分はめんどくさがりなので、当然こちらを使います。
<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>
ちなみにAPIはここから参照することができますので、この記事を読んで興味が湧いた人はぜひ覗いてみてください。
では、画像を後読みして、読み込みが完了したあとにbodyに追加するというサンプルを見ながら使いかたを書いていきます。(今回は楽をするためにjQueryも合わせて使っていきます)
まずは一つだけ画像を読み込む場合です。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>
<script>
jQuery(function(){
var queue = new createjs.LoadQueue();
queue.addEventListener('fileload', function(){
var image = queue.getResult('image01');
$('body').append(image);
});
queue.loadFile({id: 'image01', src: 'images/sample1.png'});
});
</script>
</head>
<body>
</body>
</html>
LoadQueueオブジェクトをインスタンス化して、読み込みが完了したときに発生するイベントに対するイベントハンドラを設定し、ファイルを読み込むという流れです。
LoadQueueオブジェクトは後読みを行うためのメインのAPIで、基本的にこのオブジェクトをインスタンス化して使用していきます。
ファイルの読み込みが完了した際には、対象のファイル毎にfileloadイベントが発生します。あとで説明しますが、複数のファイルを読み込む場合、すべてのファイルの読み込みが完了した時点でcompleteイベントが発生します。
読み込んだ結果はLoadQueueオブジェクトのgetResultメソッドを使用して取得することができます。
getResultメソッドには引数で取得したいファイルのidを指定します。
fileloadイベントのイベントハンドラに渡されるオブジェクトから結果を取得することもできます
queue.addEventListener("fileload", function(event){
var image = event.result;
$('body').append(image);
});
loadFileメソッドはファイルの読み込みを行うためのメソッドで、第一引数にファイルのパスとidを設定したオブジェクトを渡します。
第二引数に何も渡さなければすぐにロードが始まるのですが、第二引数にfalseを渡すことでロードを保留することができます。
保留した場合には、LoadQueueオブジェクトのloadメソッドを使ってロードを開始します。
queue.loadFile({id:"image01", src:"images/sample1.png"}, false);
queue.load();
次に複数のファイルを読み込むサンプルを見て行きたいと思います。
複数のファイルを読み込むときは、読み込む対象のファイルを記載したmanifestを作成することで簡単に読み込むことができます。
var queue = new createjs.LoadQueue();
queue.addEventListener("fileload", function(event){
var image = event.result;
$('body').append(image);
});
var manifest = [
{
id: 'image01',
src: 'images/sample1.png'
},
{
id: 'image02',
src: 'images/sample2.png'
}
];
queue.loadManifest(manifest);
manifestは配列に対象のファイルのオブジェクトを入れる形で作成します。
LoadQueueオブジェクトのloadManifestメソッドを使ってmanifestに記載されたファイルの読み込みを開始します。
loadManifestメソッドもloadFileメソッドと同様に、第二引数にfalseを渡すことでロードを保留することができます。
複数のファイルの読み込む場合、デフォルトの設定ではファイルの読み込みを1つずつ順番に行います。
そのため、大量のファイルを同時に読み込みたい場合、デフォルトのままでは非常に時間がかかります。
複数のファイルを並列で読み込みたい場合には、setMaxConnectionsメソッドを使って並列で読み込みたい数を設定します。
queue.setMaxConnections(2);
ここまでのサンプルでは画像の読み込みを対象に説明してきましたが、画像以外のファイルを読み込むことももちろんできます。
次のサンプルでは、画像とjavascriptを後読みしてみたいと思います。
var queue = new createjs.LoadQueue();
queue.addEventListener("fileload", function(event){
var item = event.item,
elm;
switch (item.type) {
case createjs.LoadQueue.IMAGE:
elm = 'body';
break;
case createjs.LoadQueue.JAVASCRIPT:
elm = 'head';
break;
}
$(elm).append(event.result);
});
var manifest = [
{
id: 'image01',
src: 'images/sample1.png'
},
{
id: 'js01',
src: 'js/sample1.js'
}
];
queue.loadManifest(manifest);
fileloadイベントのイベントハ ンドラに渡されるオブジェクトのitem.typeに、対象のファイルタイプが設定されています。
この値を参照することで、ファイルタイプ毎に処理を分けることが可能になります。
どのようなtypeがあるかは、APIを参照してください。
ちなみに、typeはPreloadJSによって自動的に判別されますが、loadFileメソッドやloadManifestオブジェクトに渡す読み込み対象のファイルの設定でtypeを予め設定することもできます。
例えば、PHPで画像を書き出す場合などに予めタイプを指定しておくことで、imageとしてPreloadJSに認識させることができます。
var manifest = [
{
id: 'image01',
src: 'images/sample1.php',
type: createjs.LoadQueue.IMAGE
}
];
このように簡単に後読みを実現できるPreloadJS、ぜひ使ってみてください。
