Class for loading assets
yarn add task-loader
npm i -S task-loader
import TaskLoader from 'task-loader';
import {
LoadImageTask,
LoadVideoTask,
LoadHowlerAudioTask,
LoadJsonTask,
LoadScriptTask,
} from 'task-loader';
const taskLoader = new TaskLoader();
taskLoader.addEvents(TaskLoaderEvent.START, () => console.log('Start'))
taskLoader.addEvents(TaskLoaderEvent.UPDATE, ({ data }) => console.log('Update', data.progress))
taskLoader.addEvents(TaskLoaderEvent.COMPLETE, () => console.log('Complete'))
taskLoader.addEvents(TaskLoaderEvent.FAILURE, () => console.log('Failure during loading'))
taskLoader.loadTasks([
new LoadImageTask({
// Array of strings or a single string with the path to the asset
assets: ['path/to/image-1.jpg', 'path/to/image-2.jpg'],
// The size of a batch, this is how many requests happen at the same time
batchSize: 1,
// Flag to disable caching of assets, by default all
// assets are stored in an object for faster retrieval.
cached: true,
// When loading a lot of assets (for example an image sequence)
// you might want to group them so you can easily remove them when
// you no longer need them
cacheNameSpace: 'foo',
// Triggered when an asset is loaded, returns the original index + the asset
onAssetLoaded: ({index, asset}) => {}
}),
new LoadVideoTask({
assets: ['path/to/video.mp4'],
}),
new LoadHowlerAudioTask({
assets: ['path/to/audio.{format}}'],
formats: ['mp3', 'ogg'],
}),
new LoadJsonTask({
assets: ['path/to/file.json'],
}),
new LoadScriptTask({
assets: ['path/to/file.js'],
}),
])
.then(() => console.log('All assets loaded');
.catch(() => console.log('Failure during loading');
import cacheManager from 'task-loader';
// Manually add an asset to the cacheManager
const asset = document.createElement('img');
cacheManager.add('image', asset, 'bar');
// Retrieve an asset from the cache manager once it's loaded
const videoBlob = cacheManager.get('path/to/video.jp4'));
// Retrieve images stored in a namespace
const images = cacheManager.get('path/to/image-1.jpg', ''foo');
// Remove assets from cache
cacheManager.remove('path/to/video.mp4');
// Remove assets within a namespace
cacheManager.remove('foo');
I've included an example setup where you can see the loader in action, to run the project follow these steps:
git clone https://github.com/larsvanbraam/task-loader.git
cd task-loader/example
yarn
yarn dev
localhost:8080
or click this link to preview online
View the generated documentation.
In order to build task-loader, ensure that you have Git and Node.js installed.
Clone a copy of the repo:
git clone https://github.com/larsvanbraam/task-loader.git
Change to the task-loader directory:
cd task-loader
Install dev dependencies:
yarn
Use one of the following main scripts:
yarn build # build this project
yarn dev # run compilers in watch mode, both for babel and typescript
yarn test # run the unit tests incl coverage
yarn test:dev # run the unit tests in watch mode
yarn lint # run eslint and tslint on this project
yarn doc # generate typedoc documentation
When installing this module, it adds a pre-commit hook, that runs lint and prettier commands before committing, so you can be sure that everything checks out.
View CONTRIBUTING.md
View CHANGELOG.md
View AUTHORS.md
MIT © Lars van Braam
Generated using TypeDoc