[]用javascript如何实现游戏登录游戏前的资源加载进度，如何将图片，音乐等素材加载到界面通过加载条显示加载进度

class LoaderManager {

    private progressUI: UIBase;

    private token;

    constructor(token) {

        Laya.loader.load([{ url: "res/ui/LoadProgress.fui", type: Loader.BUFFER }], Handler.create(this, this.loadProgress))

        this.token = token;

    }

    public loadProgress() {

        this.progressUI = UIBase.create(LoadProgress.UI_LoadProgress, "LoadProgress", LoadProgress.LoadProgressBinder.bindAll)

        this.progressUI.UIMenu.value = 0.0;

        Laya.stage.addChild(this.progressUI.displayObject);

        Laya.timer.loop(100, this, this.updataPosition);

        this.loadMainDatas();

    }

    public updataPosition() {

        this.progressUI.setPosition(Laya.stage.width / 2, Laya.stage.height / 2);

    }

    public loadMainDatas() {

        Laya.loader.load([

            { url: "res/ui/UIComponents@atlas0.png", type: Loader.IMAGE },

            { url: "res/ui/UIComponents.fui", type: Loader.BUFFER },

            { url: "res/ui/FastBet.fui", type: Loader.BUFFER },

            { url: "res/ui/Chips.fui", type: Loader.BUFFER },

            { url: "res/ui/RankSelect.fui", type: Loader.BUFFER },

            { url: "res/ui/Banker.fui", type: Loader.BUFFER },

            { url: "res/ui/GuessColor.fui", type: Loader.BUFFER },

            { url: "res/ui/SelectNum.fui", type: Loader.BUFFER },

            { url: "res/ui/Double.fui", type: Loader.BUFFER },

            { url: "res/ui/CarRanking.fui", type: Loader.BUFFER },

            { url: "res/ui/HistoryList.fui", type: Loader.BUFFER },

            { url: "res/ui/MainHead.fui", type: Loader.BUFFER },

            { url: "res/ui/CarRanking.fui", type: Loader.BUFFER },

            { url: "res/ui/HistoryList.fui", type: Loader.BUFFER },

            { url: "res/ui/MainDown.fui", type: Loader.BUFFER },

            { url: "res/ui/CardRoad.fui", type: Loader.BUFFER },

            { url: "res/ui/PersonalInfo.fui", type: Loader.BUFFER },

            { url: "res/ui/Game2D.fui", type: Loader.BUFFER },

            { url: "res/ui/TimeView.fui", type: Loader.BUFFER },

            { url: "res/ui/Message.fui", type: Loader.BUFFER },

            { url: "res/ui/Description.fui", type: Loader.BUFFER },

            { url: "res/ui/Result.fui", type: Loader.BUFFER },

            { url: "res/ui/Language.fui", type: Loader.BUFFER },

            { url: "res/ui/Result.fui", type: Loader.BUFFER },

            { url: "res/settings/UI_CN.xml", type: Loader.XML },

            { url: "res/settings/UI_EN.xml", type: Loader.XML },

            { url: "res/settings/String_CN.csv", type: Loader.TEXT },

            { url: "res/settings/String_EN.csv", type: Loader.TEXT },

            { url: "res/audio/PK_10_BGM_Short.mp3", type: Loader.SOUND },

            { url: "res/audio/PK_10_Car_ Final.mp3", type: Loader.SOUND },

            { url: "res/audio/PK_10_Car_Amb(Loop).mp3", type: Loader.SOUND },

            { url: "res/audio/PK_10_Car_End.mp3", type: Loader.SOUND },

            { url: "res/audio/PK_10_Countdown.mp3", type: Loader.SOUND }

        ], Handler.create(this, this.createGameScene), Handler.create(this, this.progress, null, false));

    }

    public createGameScene() {

        this.progressUI.onDisable();

        Laya.timer.clear(this, this.updataPosition)

        let gameManager = new GameManager(this.token);

        gameManager.preInit();

    }

    public progress(e) {

        this.progressUI.setPosition(Laya.stage.width / 2, Laya.stage.height / 2);

        this.progressUI.UIMenu.tweenValue(e * 100, 0.5)

    }

}