画像読み込みマネージャーのようなものを作ってみた

概要

jsで画像などを読み込む必要がある状況で、
複数データを読み込んで、ロードの終了を待ちたいというような状況がある
ロードを管理し、終了とロード状況を管理してくれる簡易的なものを作成してみた

前提

main.js //制御するもの　画面ごとに用意するもの

objController.js //画面に配置するオブジェクトを制御するもの

loadManager.js //今回作成するロードを管理するマネージャー

createJSにおけるロード

objController.js

function createLoadQueue() {
    return new createjs.LoadQueue(true, null, true);
}

var _manifest = [];
_self.loadFile = function (loaderIndex) {
        var loader = createLoadQueue();
        loader.index = loaderIndex;
        loader.addEventListener("fileload", _self.handleFileLoad);
        loader.addEventListener("complete", _self.handleComplete);


        /*bitmap形式で読み込む準備 ---------------------------------------*/
        _manifest.push({ kind: "bg_image", id: 1, 'src': "/aaa/bbb.png" });
        /*--------------------------------------------------------------*/

        loader.loaded = false;
        var data = { loader: loader, manifest: _manifest };
        return data;
}
_self.handleFileLoad = function (evt) {
        if (evt.item.type == "image") {
            var bitmap = new createjs.Bitmap(evt.result);
            bitmap.name = evt.item.kind;
            _bitmapContainer[evt.item.kind][evt.item.id] = bitmap;
            _bitmapContainer[evt.item.kind][evt.item.id].visible = true;
        }
}
 _self.handleComplete = function (evt) {
        var queue = evt.target;
        if (typeof queue.index !== 'undefined') {
            // 完了フラグを立てる
            queue.loaded = true;
        }
}

マネージャーロジック

loadManager.js
var LoadManager = function () {
    var _self = this;
    var isObjLoaded = false;//loadManagerにpushされた各オブジェクトのロードが完了したかどうか
    var sp = 0;
    var loaderIndex = 0;　
    var loaderObj = [];　//ロードリスト
    var loadNum = 0; //ロードするファイル数


    _self.push = function (obj) {
        var data = obj.loadFile(loaderIndex); //各オブジェクトコントローラーからローダーとロードしたいもの（マニフェスト）を受け取る
        obj.data = data;　//オブジェクトに関連つける
        loaderObj[loaderIndex] = obj; //　ロードリストに追加
        ++loaderIndex;
        data.loader.loaderObj = obj;
    }

    //初期化
    _self.init = function () {
        isObjLoaded = false;
        sp = 0;
        loaderIndex = 0;
        loaderObj = [];
        loadNum = 0;
        state = STATE_LOAD;
        frameCounter = 0;
    }

    //ロードを開始する
    _self.start = function () {
        // ロードするファイル数を取得
        for (var i = 0; i < loaderObj.length; i++) {
            var manifest = loaderObj[i].data.manifest;
            loadNum += manifest.length;
        }
        createjs.Ticker.addEventListener('tick', update);
    }

    //update
    function update() {
        diffTime = getDiffTime();
        switch (state) {
            case STATE_LOAD:
                // 読み込み終了
                if (isLoadEnd()) {
                    state = STATE_LOAD_END;
                    frameCounter = 0;
                    break;
                }
                nextLoad();
                break;
            case STATE_LOAD_END:
                if (frameCounter == 1) {
                    isObjLoaded = true;
                    createjs.Ticker.removeEventListener('tick', update);
                }
                break;
        }
        ++_frameCounter;
    }

    //ロードが終了したかどうか
    function isLoadEnd() {
        var loaded = true;
        for (var index in loaderObj) {
            loaded = loaded && loaderObj[index].data.loader.loaded;
        }
        return loaded;
    }

    //次のロードを開始する
    function nextLoad() {
        // 初回もしくは、一つ前のロードが終わっていたら次のロードを始める
        if (sp == 0 || loaderObj[sp - 1].data.loader.loaded) {
            var loader = loaderObj[sp].data.loader;
            var manifest = loaderObj[sp].data.manifest;
            for (var i = 0; i < manifest.length; ++i) {
                manifest[i].loadTimeout = 50000;
            }
            if (manifest.length != 0) {
                loader.setMaxConnections(5);
                loader.loadManifest(manifest);
            } else {
                loader.loaded = true;
            }
            sp++;
        }
    }
}

使用イメージ

main.js

//初期化して、ロードしたいオブジェクトをpushする
var loadManager =  new LoadManager();
loadManager.init();

obj1 = new objController();
obj2 = new objController();
obj3 = new objController();
loadManager.push(obj1);
loadManager.push(obj2);
loadManager.push(obj3);

//ロードを開始する
loadManager.start();

//ロードの終了を判定する
loadManager.isLoaded();