loaderjs
v1.0.0
Published
A flexible promise-based resource loader for web application.
Downloads
507
Maintainers
Readme
LoaderJS
A customizable resource loader for web applications. Promise-based asynchronous loading and control flow. Can support any types of files, just create custom loader for your custom files.
Installation:
// NPM
npm install loaderjs
Usage
For global window:
<script src="loaderjs.bundle.min.js" type="text/javascript">
<script type="text/javascript">
// `LoaderJS` will be exposed to global `window`
LoaderJS.load([...]);
</script>
For Webpack or Browserify:
// Import
var LoaderJS = require('loaderjs');
// Start loading
LoaderJS.load([...]);
LoaderJS.load(resources [, callback]) -> Promise
To start loading resources, just call LoaderJS.load(resource, callback)
, where resource is a 2-dimensional array of possible items, and optional callback function with parameters function(err, data){}
. Returns Promise
.
The resource collection must be a 2-Dimensional array.
- 1st level is
SEQUENCE
loading. Waits for the preceding element to finish. - 2nd level is
PARALLEL
loading. Does not wait, loads immediately.
The items can be.
- String
url
(like value of src attribute) - Promise
- Promise's
resolver
function -function(resolve, reject) {...}
- Object with
src
andthen
property -{ src: 'file.js', then: function() {...} }
- Any falsy value, which will auto resolve -
null or undefined or etc.
The callback function is triggered when loading is completely done or loader encounters error while loading.
- Check the
err
to see the status result - The
data
argument an array that contains the data passed by each loaders
LoaderJS currently contains predefined loaders for file JS, CSS, HTML (WebComponent). You can always create your own loaders to suits your needs.
Example Code:
var resA = [];
// dummy-scriptA will always finish & execute first, than dummy-scriptB.
resA.push('dummy/dummy-scriptA.js');
//dummy-img will load along with dummy-scriptA.
resA.push('dummy/dummy-img.gif');
// A promise
resA.push(new Promise())
// A promise resolver
resA.push(function(resolve, reject) {})
// Object
resA.push({
src: 'dummy/big-file.js',
then: function() {
// Called when done loading big-file.js
// You can also return a promise and loader wait for it to fulfil
return client.init() // Assume init() returns a promise
}
})
var resB = [];
// dummy-scriptB might finish last after dummy-css. Parallel loading
resB.push('dummy/dummy-scriptB.js');
// dummy-css might finish first than dummy-scriptB. Parallel loading
resB.push('dummy/dummy-css.css');
var resC = 'dummy/dummy-480x270-FairyLights.jpg';
// Start loading resources
LoaderJS.load([resA, resB, resC], function(err, data) {
var el = document.getElementById("loader");
if(!err){
console.log('All Loaded!', data);
} else {
console.log('Ouch!', data);
}
});
LoaderJS.loadOne(resource)
Loads a single resource. Returns Promise
.
LoaderJS.loadMany(resources)
Loads multiple resources in parallel (1-dim array only). Returns Promise
.
Customize
To add custom loaders, just call LoaderJS.addLoader(loader)
where loader is an object must contain a property "ext" to associate the loader to a file(s).
There are 2 main types of custom loader:
- Loader that uses element to load files. (eg. js, css, html)
- Loader that does not use element to load files. (eg. jpg, png, gif, etc...)
Type 1: Load with element
// Javascript Loader
LoaderJS.addLoader({
ext: 'js', // Associated file. Can be multiple, split by comma
tag: 'script', // The element that will be created
parent: 'body', // The parent of the element
attr: 'src', // The attribute of element where the url will be placed
// Optional property
// This is triggered before the element is attached to its parent
config: function(element) {
element.async = true;
}
});
// Stylesheet Loader
LoaderJS.addLoader({
ext: 'css',
tag: 'link',
parent: 'head',
attr: 'href',
config: function(element) {
element.type = 'text/css';
element.rel = 'stylesheet';
}
});
Type 2: Load without element. Add a property "custom" with function value.
// Custom Loader
LoaderJS.addLoader({
ext: 'jpg,png',
custom: function(resolve, reject, url) {
console.log('Loading Image', url);
var image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject('Unable to load image ' + url);
};
image.src = url;
}
});
Additionally, you can link more file extensions to existing loader.
LoaderJS.addLoader({
ext: 'gif',
custom: LoaderJS.loaders['jpg']
});
More...
Progress Callback
You can also add 3rd argument to LoadJS.load(res, cb, progress)
which enables to keep track of the progress. The callback will pass the percentage of the loading progress.
License
MIT