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') });