arewedone
v0.2.1
Published
A simple JS mini-library that calls a callback when various (tracked) assets are done loading.
Downloads
2
Maintainers
Readme
arewedone.js
A simple mini-library that calls a callback when various (tracked) assets are done loading.
Why use arewedone.js?
If you need to load multiple assets (images, scripts, webfonts etc.. ) asynchronously and only proceed once all requried assets are loaded, arewedone.js can help.
Essentially, arewedone.js is a queue that marks assets as loaded when notifed and then calls the provided callback when all assets have been marked as done loading.
Alternativey, instead of arewedone.js, one could use native Promises or a Promises library such as bluebird.
Usage
If using Browserify, Webpack, etc... npm install arewedone
OR, include the arewedone.js
file directly.
Once arewedone.js is installed, using it in your project is simple:
// arewedone.Tracker will call this callback when all assets have loaded
function mycallback() {
console.log('All assets loaded!');
}
// Create a Tracker instance, initialized with our callback
const tracker = arewedone.Tracker(mycallback);
// Add an asset to be tracked
// Note: the asset being tracked is added by simply providing a unique string name
tracker.add('jquery');
// (As an exmaple) Let's load jQuery
const jqScriptTag = document.createElement('script');
jqScriptTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js';
// When the jQuery script tag is loaded, the browser will execute the onload function below
// In the onload function, we notify our tracker that jQuery is done loading
jqScriptTag.onload = function() {
tracker.markDone('jquery'); // this is the magic
};
That's it!
Once jQuery has loaded, our tracker will be notified and if no other assets are waiting to load, it will call mycallback
.
###API Adding an asset to be tracked.
tracker.add('asset_name')
Marking an asset as done.
tracker.markDone('asset_name')
Marking an asset as failed (was not able to load).
tracker.markFailed('asset_name')
Determine if any assets are pending (not yet marked as done/loaded).
tracker.anyPending() // returns true or false
Note: arewedone.js will only call the provided callback when ALL tracked assets have been marked as done.
*The source (arewedone.js) is very readable and documented - making it an excellent resource to clarify any questions that arise.
Please report any issues on Github.
This project is MIT licenced.