A generic resource loader, made with web games in mind.
This library was built to make it easier to load and prepare data asynchronously. The goal was mainly to unify the many different APIs browsers expose for loading data and smooth the differences between versions and vendors.
It is not a goal of this library to be a resource caching and management system, just a loader. This library is for the actual mechanism of loading data. All caching, resource management, knowing what is loaded and what isn't, deciding what to load, etc, should all exist as logic outside of this library.
As a more concrete statement, your project should have a Resource Manager that stores resources and manages data lifetime. When it decides something needs to be loaded from a remote source, only then does it create a loader and load them.
// ctor
import { Loader } from 'resource-loader';
const loader = new Loader();
loader
// Chainable `add` to enqueue a resource
.add(url)
// Chainable `use` to add a middleware that runs for each resource, *after* loading that resource.
// This is useful to implement custom parsing modules (like spritesheet parsers).
.use((resource, next) =>
{
// Be sure to call next() when you have completed your middleware work.
next();
})
// The `load` method loads the queue of resources, and calls the passed in callback called once all
// resources have loaded.
.load((loader, resources) => {
// resources is an object where the key is the name of the resource loaded and the value is the resource object.
// They have a couple default properties:
// - `url`: The URL that the resource was loaded from
// - `error`: The error that happened when trying to load (if any)
// - `data`: The raw data that was loaded
// also may contain other properties based on the middleware that runs.
});
// Throughout the process multiple signals can be dispatched.
loader.onStart.add(() => {}); // Called when a resource starts loading.
loader.onError.add(() => {}); // Called when a resource fails to load.
loader.onLoad.add(() => {}); // Called when a resource successfully loads.
loader.onProgress.add(() => {}); // Called when a resource finishes loading (success or fail).
loader.onComplete.add(() => {}); // Called when all resources have finished loading.You will need to have node setup on your machine.
Then you can install dependencies and build:
npm i && npm run buildThat will output the built distributables to ./dist.
- IE 9+
- FF 13+
- Chrome 20+
- Safari 6+
- Opera 12.1+
- Before middleware has been removed, so no more
prefunction.- If you used
premiddleware for url parsing, use the newurlResolverproperty instead.
- If you used
crossOriginmust now be a string if specified.Resource.LOAD_TYPEenum replaced with Load Strategies.- For example,
loadType: Resource.LOAD_TYPE.IMAGEis nowstrategy: Loader.ImageLoadStrategy.
- For example,
Resource.XHR_RESPONSE_TYPEenum replaced withXhrLoadStrategy.ResponseType.- For example,
xhrType: Resource.XHR_RESPONSE_TYPE.DOCUMENTis nowxhrType: Loader.XhrLoadStrategy.ResponseType.Document.
- For example,
- Overloads for the
addfunction have been simplified.- The removed overloads were not widely used. See the docs for what is now valid.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
