Skip to content

A simple JS mini-library that calls a callback when various (tracked) assets are done loading.

License

Notifications You must be signed in to change notification settings

cgons/arewedone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

A simple JS mini-library that calls a callback when various (tracked) assets are done loading.

Resources

License

Stars

Watchers

Forks

Packages

No packages published