Example
Note: Throttle
your network to see the loading effect.
| # | Task | assets | Progress | Completed |
|---|---|---|---|---|
|
|
|||
| Total Progress | ||||
Events:
-
{{event.data}}
Example Code
const taskLoader = new TaskLoader();
const tasks = [
new LoadImageTask({
assets: ['./static/dummy-image.jpeg'],
weight: 2,
}),
new LoadVideoTask({
assets: ['./static/dummy-video.mp4'],
}),
new LoadJsonTask({
assets: ['./static/dummy-json.json'],
}),
new LoadScriptTask({
assets: ['./static/dummy-script.js'],
}),
new LoadHowlerAudioTask({
assets: ['./static/dummy-audio.{format}'],
format: ['mp3'],
}),
];
// Add event listeners
taskLoader.addEventListener(TaskLoaderEvent.START, event => {
console.log('Start')
});
taskLoader.addEventListener(TaskLoaderEvent.UPDATE, event => {
console.log('Update', event.data.progress)
});
taskLoader.addEventListener(TaskLoaderEvent.COMPLETE, event => {
console.log('Complete')
});
taskLoader.addEventListener(TaskLoaderEvent.FAILED, event => {
console.log('Failure')
});
// Start the task loader
taskLoader.loadTasks(tasks)
.then(() => {
console.log('All tasks have been loaded')
})
.catch(() => {
console.log('Something went wrong loading the tasks')
});