async-load

An extremely minimal asynchronous JavaScript loader, async-load has a full unit test suite that passes in all popular browsers (and some not so popular browsers including IE6+), is under 160bytes when compiled with Uglify2 and gzipped, and has simple but featured API.

This library is made to be as small as possible so it can be inlined into the head of your HTML. This means it can be used to bootstrap your application without using blocking script tags or ugly boilerplate code.

Quick Start

Three options are available for getting the source:

• Download the latest release.
• Clone the repo: git clone git://github.com/heyday/async-load.git.
• Install with Bower: bower install async-load.
• Install with npm: npm install async-load.

AMD

1. Configure your loader with a package:

   packages: [
   	{ name: 'async-load', location: 'path/to/async-load/', main: 'load' },
   	// ... other packages ...
   ]

2. define( [ 'async-load', ... ], function( load, ... ) { ... } ); or require( [ 'async-load', ... ], function( load, ... ) { ... } );

CommonJS

1. require( 'async-load' );

Script Tag

1. <script src="path/to/async-load/load.js"></script>
2. async-load will be available as window.asyncLoad

API

asyncLoad( 'path/to/file.js', mySuccessOrErrorFunction, timeoutInMilliseconds );

Basic load

Asynchronously load a file with AMD environment:

define( [ 'async-load' ], function( asyncLoad ) {
	asyncLoad( 'path/to/your/file.js' );
} );

Asynchronously load a file with CommonJS environment:

var asyncLoad = require( 'async-load' );

asyncLoad( 'path/to/your/file.js', function() {
	// Success or error callback
} );

Asynchronously load a file with browser global:

window.asyncLoad( 'path/to/your/file.js' );

Load with callback

Success or error callback:

asyncLoad( 'path/to/your/file.js', function() {
	// Success or error callback
} );

Due to IE not supporting the standard onload and onerror events, it is not possible to reliably determine the status of the loaded file (i.e., whether it was successful or there was an error). Because of this the async-load API has only a single callback, which is called in both instances. It is recommended, therefore, that you determine the status of the load within the callback function.

Determine the status of your loaded file:

asyncLoad( 'path/to/your/file.js', function() {
	try {
		window.myInitFunction();
	} catch( e ) {
		console.log( 'ooo something went wrong, maybe the file didn\'t load?', e );
	}
} );

Load with timeout

Time out (in milliseconds):

asyncLoad( 'path/to/your/file.js', myCallBack, 1000 );

The time out will cause the callback function to be triggered after the timeout interval has elapsed. Be aware that this will not stop the file from eventually loading.

Common usage

Google analytics

var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];

asyncLoad(('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js');

Typekit

asyncLoad( '//use.typekit.com/{your-typekit-id}.js', function() {
	try {
		window.Typekit.load();
	} catch(e) {}
} );

For more advanced loading of typekit that allows you to control the loading states see the typekit-load module.

Development

Running the unit tests

1. npm install - Install all required dev modules
2. npm install -g grunt-cli - Install Grunt
3. grunt test - Lints all files, and then runs the unit tests in a PhantomJS instance

Building the module locally

1. npm install - Install all required dev modules
2. npm install -g grunt-cli - Install Grunt
3. grunt build - Runs all tests, and then builds the production file