Asynchronous (non-blocking) Javascript and CSS Loader
- Load JS files without blocking and in parallel
- Load CSS files
- Execute a callback function after loading a JS file asynchronously
- Execute independent JS files independently from the call order
- Avoid loading a JS file twice if the HTTP cache is missing (same domain or cross domain)
- Avoid executing a JS file twice if called twice
- Load JS files outside the "same domain" policy
- Ability to define names for JS or CSS files
- Ability to pre-define dependencies in the or somewhere central
- Aggregation support with "provides" feature
async5.js uses "DOM Level 2 Core" and "DOM Level 2 Event" APIs. The following browsers are known to support the required "DOM Level 2" APIs hence async5.js is expected to be compatible with them:
- Internet Explorer 6 and later
- Chrome 1.0 and later
- Firefox 1.5 and later
- Safari 1.0 and later
- Opera 7 and later
async5.js has been tested to work with;
Desktop Browsers:
- IE6, IE7, IE8, IE9, IE10
- Chrome 24, Chrome 25
- Firefox 18, Firefox 19
- Safari 5.1, Safari 6
- Opera 12.14
Mobile Browsers:
- iOS 6.0.1 / Mobile Safari 6
- Android 4.1.1 / Chrome 18
- Andorid 4.1.1 / Webkit Browser 4.0
- Android 4.0.4 / Webkit Browser 4
- Windows Phone 7 / IE Mobile 9
Load the async5.js in the HEAD section with a html script tag and then call async5.load() method with appropriate parameters.
<HTML>
<HEAD>
<script type="text/javascript" src="http://example.com/async5.js"></script>
<script type="text/javascript>
async5.load({
name: 'jQuery',
url: 'http://code.jquery.com/jquery-1.9.1.min.js',
type: 'js',
callback: function() {
window.alert('jQuery is loaded');
}
});
</script>
</HEAD>
<BODY>...</BODY>
</HTML>
It's also possible to call the async5.load() method in the BODY section:
<HTML>
<HEAD>
<script type="text/javascript" src="http://example.com/async5.js"></script>
</HEAD>
<BODY>
......
......
......
<script type="text/javascript>
async5.load({
name: 'jQuery',
url: 'http://code.jquery.com/jquery-1.9.1.min.js',
type: 'js',
callback: function() {
window.alert('jQuery is loaded');
}
});
</script>
.....
.....
.....
</BODY>
</HTML>