- ×
:zap: A very easy-to-use, blazing fast asset-loader using promises. Support older-browsers and preload images, audios and videos.
Filed under animationShow AllA very easy-to-use asset-loader using promises. Supports images, audio and video. Fully documented for a perfect usage in your TypeScript projects.
Installation
Install using
yarn
ornpm
:yarn add loaderz
npm install loaderz --save
Usage
// Default export of Loaderz is the Loader. import Loader from 'loaderz'; // A list of heavy images to load, it could be art-assets for your HTML5 game const images = [ 'https://images.unsplash.com/photo-1549360336-6a77ea5193eb', 'https://images.unsplash.com/photo-1549379458-e8f7034360a9', 'https://images.unsplash.com/photo-1548175850-b5a765959436', ]; // Some audio elements to spice-up your HTML5 game const audios = [ 'http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3', 'http://www.sample-videos.com/audio/mp3/wave.mp3', ]; // Instanciate the loader, you can easily implement it anywhere in your project const loader = new Loader(); // Queue all our different resources (we can chain since queue returns the // instance of loader) loader .queue('image', images) .queue('audio', audios); // Start loading the resources and have a full control of the global loading // state using a promise and return a response with all elements loaded loader.start() .then(response => console.log('All urls have been loaded, do whatever you want here:', response));
Docs
Loader#queue(type: string, src: string | string[])
: accepts 3 different types of medias (audio, image, video).Loader#start()
: used to load all the queued resources. Returns a global promise of the resources loading.Loader#queuedImages
: an array of URLs of images queued to load.Loader#queuedMedias
: an array ofMediaData
elements queued to load.
Contribute
All the code is written in TypeScript. Feel free to contribute by creating issues, PRs or suggesting new features:
- Fork and clone the repo:
git@github.com:username/loaderz.git
- Install all dev-deps:
yarn install
ornpm install
- Run the demo:
yarn demo
(localhost:8080
) - Edit some files
- Run tests:
yarn test
ornpm test
- (optional) run
yarn lint
ornpm run lint
to automatically lint the files
- (optional) run
- Commit and push your edits on a separate branch
- Create a PR which points on the
develop
branch
License
Under MIT license, view the license file for more informations.