PreloadJSを使ってらくらく非同期読み込み #JavaScript

PreloadJSを使えば非同期ファイル読み込みと、その処理がとっても楽に書けるようになる(はず)

http://www.createjs.com/#!/PreloadJS

コードサンプル:画像を読み込むたびにbodyに追加していく

preload.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script src="./preloadjs-0.3.0.min.js"></script>
        <script src="./preload.js"></script>
    </body>
</html>

preload.js

function init(){
    // LoadQueueのインスタンス作成
    // 引数にfalseを指定するとXHRを使わずtagによる読み込みを行います
    var queue = new createjs.LoadQueue(true);

    // 読み込むファイルの登録。
    var manifest = [
        {"src":"./image1.jpg","id":"image1"},
        {"src":"./image2.jpg","id":"image2"},
        {"src":"./image3.jpg","id":"image3"}
    ];
    // src,idともに省略可能。省略した場合はパスがsrcとidにセットされる
    // var manifest = ["./image1.jpg","./image2.jpg","./image3.jpg"];

    // manifestの読込
    queue.loadManifest(manifest,true);
    // 任意のタイミングで読込を開始したい場合、第2引数にfalseを指定し、queue.load()を実行する
    // queue.loadManifest(manifest,false);
    // queue.load();

    // ファイルが1つ読込完了するたびにfileloadイベントが発生
    // fileloadイベントにメソッドを割り当てる
    queue.addEventListener("fileload",handleFileLoad);  
    // 全ファイルの読み込みが終わった時completeイベントが発生する
    queue.addEventListener("complete",handleComplete);

    // ファイルが1つ読込完了すると呼ばれる。引数にファイルの読込結果を含むオブジェクトが渡される
    function handleFileLoad(event){
        // .itemにはファイルの情報が格納されています。詳細は後述
        var item = event.item;
        if(item.type === createjs.LoadQueue.IMAGE){
            document.body.appendChild(event.result);
        }
    }

    // ファイルがすべて読込完了すると呼ばれる
    function handleComplete(event){
        // completeハンドラに渡される引数が持っているgetResult()にidを指定してファイルオブジェクトを取得する
        // var file = event.getResult(id); manifestで指定したid
    }

    window.addEventListener('load',function(){
        init();
    });
}

おまけ

.itemのもつプロパティ

omake.js

    function handleFileLoad(event){
        var item = event.item;      // loadしたファイルの情報をもつitem
        var type = item.type;       // 'image'や'javascript'や'css'などファイルの種類
        var ext  = item.ext;        // 拡張子　('jpg'などドットを含まない拡張子)
        var id   = item.id;         // loadManifest()登録時に指定したid
        var src  = item.src;        // loadManifest()登録時に指定したURL・パス
        var tag  = item.tag;        //　読み込んだファイルを扱えるtag名 (画像なら'img' CSSなら'style'
        // この中でも特にtypeはファイルの種類に応じた処理を行うためによく使うことになると思います

        // typeはcreatejs.LoadQueueが持つ定数と比較することで種類のチェックが行えます     
        // createjs.LoadQueueの定数(種類)の一覧と中身
        createjs.LoadQueue.CSS              // "css"
        createjs.LoadQueue.IMAGE            // "image"
        createjs.LoadQueue.JAVASCRIPT       // "javascript"
        createjs.LoadQueue.JSON             // "json"
        createjs.LoadQueue.SOUND            // "sound"
        createjs.LoadQueue.SVG              // "svg"
        createjs.LoadQueue.TEXT             // "text"
        createjs.LoadQueue.XML              // "xml"
}

PreloadJSで快適非同期ライフを(・ω<)☆彡