PreloadJSで外部ファイルを読み込む

PreloadJSは、画像, 音声, CSS, JS, XMLといった外部ファイルを読み込むことができるJavaScriptライブラリです。CreateJSのサイトからダウンロードできます。これまで、JavaScriptで複数の外部ファイルを読み込む処理は比較的面倒でしたが、PreloadJSを使うと簡単に行えるだけでなく、読み込み状況のパーセンテージを取得することもできます。

追記 2013/05/29

PreloadJSは、バージョン0.3で仕様が大幅に変更になりました。新しくなったPreloadJSの使い方は、「新しくなったPreloadJSのLoadQueueクラスで外部ファイルを読み込もう」で解説していますので、こちらをご覧下さい。

PreloadJSの読み込み

PreloadJSを使うには、まずHTMLのhead領域に下記のように記述し、PreloadJSのJavaScriptファイルを読み込みます。なお、私の確認した限り、PreloadJSはIE6, 7, 8には対応していないようです。

HTML

<script type="text/javascript" src="js/preloadjs-0.1.0.min.js"></script>

PreloadJSの基本的な使い方

それでは、PreloadJSの基本的な使い方を見てみましょう。まず、PreloadJSインスタンスを作成し、loadFileメソッドで読み込むファイルの情報を渡します。loadFileメソッドの引数はオブジェクト形式で指定し、srcがファイルのパスになります。

下記の例では1枚の画像を読み込んでいますが、読み込んだ画像はonFileLoadイベントハンドラで取得することができます。onFileLoadは、画像の読み込みが完了した際に実行され、引数でイベントオブジェクトを受け取ります。イベントオブジェクトのresultプロパティに読み込んだ画像がHTMLImageElementとして格納されています。

JavaScript

var _image;

function load() {
  var loader = new PreloadJS();
  loader.onFileLoad = function(e) {
    _image = e.result;
    init();
  };
  loader.loadFile({src:"img/image_1.jpg"});
}

function init() {
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(_image);
}

window.onload = function() {
  load();
};

複数のファイルを読み込む loadManifest()

loadFile()では、1度に1つのファイルしか指定することができませんが、loadManifest()では、複数のファイルを同時に指定することができます。loadManifest()の引数には、読み込むファイルの情報を格納したオブジェクトを配列に入れて渡します。複数のファイルを読み込む場合には、idを指定しておくと取得する際に役立ちます。

また、ファイルをキャッシュしたくない場合は、ファイルのパスにクエリーを付加します。その際、typeプロパティでファイルの形式を指定する必要があります。これは、typeが省略された場合、PreloadJSは拡張子でファイル形式を判別しているためです。

下記の例では、3枚の画像を読み込んでいます。onFileLoadで受け取ったイベントオブジェクトのidプロパティで読み込んだ画像を判別し、処理を分岐しています。

JavaScript

var _image1, _image2, _image3;

function load() {
  var loader = new PreloadJS();
  var query = "?" + new Date().getTime();
  var manifest = [
    {src:"img/image_1.jpg" + query, id:"image1", type:PreloadJS.IMAGE},
    {src:"img/image_2.jpg" + query, id:"image2", type:PreloadJS.IMAGE},
    {src:"img/image_3.jpg" + query, id:"image3", type:PreloadJS.IMAGE},
  ];
  loader.onFileLoad = function(e) {
    switch(e.id) {
      case "image1" :
        _image1 = e.result;
        break;
      case "image2" :
        _image2 = e.result;
        break;
      case "image3" :
        _image3 = e.result;
        break;
    }
  };
  loader.onComplete = function(e) {
    e.target.onFileLoad = null;
    e.target.onComplete = null;
    init();
  };
  loader.loadManifest(manifest);
}

function init() {
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(_image1);
  body.appendChild(_image2);
  body.appendChild(_image3);
}

window.onload = function() {
  load();
};

PreloadJSのイベントハンドラ

PreloadJSには、すでに紹介したonFileLoad以外にも様々なイベントハンドラがあります。onProgressは、ファイルの読み込み中に継続的に実行されます。イベントオブジェクトのloadedプロパティやインスタンスのprogressプロパティで読み込み状況を0〜1の比率で取得することができます。

onErrorは、エラーが起こった際に実行されます。受け取ったイベントオブジェクトのidやsrcプロパティからエラーになったファイルの情報がわかります。

onCompleteは、すべてのファイルの読み込みが完了した際に実行されます。下記の例では、PreloadJSインスタンスのgetResultメソッドで読み込んだ画像を取得しています。

JavaScript

var _image1, _image2, _image3;

function load() {
  var loader = new PreloadJS();
  var query = "?" + new Date().getTime();
  var manifest = [
    {src:"img/image_1.jpg" + query, id:"image1", type:PreloadJS.IMAGE},
    {src:"img/image_2.jpg" + query, id:"image2", type:PreloadJS.IMAGE},
    {src:"img/image_3.jpg" + query, id:"image3", type:PreloadJS.IMAGE}
  ];
  loader.onProgress = function(e) {
    console.log("onProgress", e.loaded, loader.progress);
  };
  loader.onError = function(e) {
    console.log("onError", e);
  };
  loader.onComplete = function(e) {
    _image1 = loader.getResult("image1").result;
    _image2 = loader.getResult("img/image_2.jpg" + query).result;
    _image3 = this.getResult("image3").result;
    e.target.onProgress = null;
    e.target.onError = null;
    e.target.onComplete = null;
    init();
  };
  loader.loadManifest(manifest);
}

function init() {
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(_image1);
  body.appendChild(_image2);
  body.appendChild(_image3);
}

window.onload = function() {
  load();
};

CSS, JavaScript, XMLファイルの読み込み

PreloadJSは、画像ファイル以外にも様々な形式のファイルに対応しています。下記の例では、CSS, JavaScript, XMLファイルをPreloadJSで読み込んでいます。

しかし、PreloadJS 0.10ではXMLファイルに関しては取得できません。ファイルの読み込み自体は行われているようですが、イベントオブジェクトのresultプロパティではundefinedとなっています。今後の対応に期待したいところです。

JavaScript

function load() {
  var loader = new PreloadJS();
  var query = "?" + new Date().getTime();
  var manifest = [
    {src:"css/index.css" + query, id:"css", type:PreloadJS.CSS},
    {src:"js/index2.js" + query, id:"js", type:PreloadJS.JAVASCRIPT},
    {src:"xml/index.xml" + query, id:"xml", type:PreloadJS.XML}
  ];
  loader.onFileLoad = function(e) {
    switch(e.id) {
      case "css" :
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(e.result);
        break;
      case "js" :
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(e.result);
        break;
      case "xml" :
        console.log("xml", e.result);
        break;
    }
  };
  loader.onComplete = function(e) {
    e.target.onFileLoad = null;
    e.target.onComplete = null;
  };
  loader.loadManifest(manifest);
}

window.onload = function() {
  load();
};