liteloader
v1.0.1
Published
async loads scripts and html imports while maintaing execution order
Downloads
112
Maintainers
Readme
liteloader-js
Conditionally loads scripts, HTML imports, imgs, and css in parallel while maintaining execution order for scripts. Can also be in-lined into index.html in the build process to cut a round-trip.
Note that for older browsers it expects to find the Promise polyfill in node_modules, if you are using an alternative polyfill or installing it via another route (like bower) you'll need to adjust the file path. Ditto for webcomponents.
Should be good to go for IE 9+.
##Example uses
// Lets say we have an application logic file, bizlogic.js with some dependencies:
Loader.load(
'../node_modules/somelib.js',
'../node_modules/otherlib.js'
).then(() => {
// module code
});
// then lets say you have some event handlers to wire up that require the main file even though it
// doesn't export anything, in that file you'd just:
Loader.load(
'../node_modules/somelib.js', // already imported, request deduped.
'../node_modules/thirdLib.js',
'../dist/bizlogic.js'
).then(() => {
// attach handlers.
});
// if an asset fails to load the Promise will reject, allowing you to do your own error handling.
// But this presents a catch-22: you are using the loader to load your error handling code!
// liteloader has its own error modal dialog box for you to use:
Loader.load('doesntexist.js').catch(Loader.showError);
Couple of things to note:
- This module uses a Promise-based API. It will attempt to load the polyfill if it doesn't detect Promise so no need to include it on every page.
- Ditto for webcomponents.
- You have to use global namespaces to get a handle on module output.
- Requests are cached, requests for the same asset (identical URLs) do not trigger network calls.
- For images you get a Promise of the
img
tag but no other action is taken, for all other assets you get a Promise of the element that resolves when itsonload
fires (scripts, css and HTML imports are injected into the document for you).
While not nearly as full-featured as some other loaders and relies on global namespace vars, this one is simple and lean at 6kb unzipped.
##To run the tests:
Tests are run via jasmine. Type 'make serve' in the project directory and point your browser at http://localhost:8080/.