(因為範例的loading載的超快,我來不及截圖,只好先截再重新整理了囧~)

當我們畫面需要載入非常多圖片,載入時間可能會相當長的時候,我們會希望有一個進度條可以讓使用者知道當前的載入狀態,減緩等待時間的不耐煩,這時候就可以使用loader裡的狀態監聽,並搭配進度條的顯示

這次的素材使用前幾篇的走路動畫,載入的方式可以直接回去Day5 連續動圖spriteSheet 使用loader json載入找,本篇就不提囉~
稍微更改載入的寫法

let assets = 'img/sheet.json';
let loader = new PIXI.loaders.Loader();
loader.add(assets);
loader.on('progress',function (loader,res) {
    console.log('progress:'+ loader.progress + '%')
})
loader.on('complete',function (loader,res) {
    console.log('complete')
});
loader.load(onAssetsLoaded);

loader.on監聽載入狀況,並有loader.progress紀錄當前載入進度,當載入完成之後就可以呼叫loader.load去執行接下來的任務

console出來的結果