Example

Note: Throttle your network to see the loading effect.
# Task assets Progress Completed
  • {{asset}}
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')
  });