To gain speed when display content on the web page, you need to ideally place all the javascript code at the bottom of the page.
For various reasons (size, processing time, etc.), but today with AsyncJS will make everything more comfortable and will provide the necessary support(with only 1.22KB size! and Gziped 668byte!).
First off, call all load file functions[
window.async('file.js', ... )] and after end it loop, load all anonymous functions[window.async(function(){...})].
If the current protocol is
file://and you input file has//, AsyncJS change it tohttp://
npm i olaferlandsen-asyncjs
```
### Download ZIP(unstable)
[Download Unstable](https://github.com/olaferlandsen/AsyncJS/archive/master.zip)
### Download ZIP(Stable)
[Download Stable](https://github.com/olaferlandsen/AsyncJS/releases/latest)
### Git Clone
git clone git://github.com/olaferlandsen/AsyncJS.git
## API
### Simple load script after load document
```javascript
window.async(string file);
Example
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js');window.async(function success);Example
window.async(function(){
console.log('Hello!');
});window.async(function success[, array arguments]);Example
window.async(function(name, lastname){
console.log('Hello '+name+' '+lastname+'!');
}, ['Olaf', 'Erlandsen']);window.async(string file[, function success]);Example
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
console.log('You load jquery '+ $.fn.jquery);
});window.async(string file[, function success [, array arguments] ]);Example
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(protocol){
console.log('You load jquery '+ $.fn.jquery + ' with protocol: ' + protocol);
}, [window.location.protocol]);window.async(string file[, function success [, function error] ]);Example
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
console.log('You load jquery '+ $.fn.jquery );
}, function () {
console.error('Error when try load file');
});window.async(string file [, function success [, function error [, array arguments] ] ]);Example
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(protocol){
console.log('You load jquery '+ $.fn.jquery + ' with protocol: ' + protocol);
}, function () {
console.error('Error when try load file');
}, [window.location.protocol]);Click here to open online demo
With this example you can put you own jQuery script and execute it only if jQuery file is loaded by AsyncJS(if it possible)
<!DOCTYPE HTML>
<html>
<head>
<title>AsyncJS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="src/AsyncJS.js"></script>
<!-- No need put jquery here!! :) -->
</head>
<body>
<script>
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
console.log("Now you can use jQuery and don't need load it on <head> any more :)");
});
</script>
</body>
</html>With this example you can put you own jQuery script before load jQuery file
<!DOCTYPE HTML>
<html>
<head>
<title>AsyncJS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="src/AsyncJS.js"></script>
</head>
<body>
<script>
window.async(function(){
console.log("Now you can use jQuery and don't need load it on <head> any more, because you can use Async before load jQuery :)");
console.log("You jQuery version is " + $.fn.jquery);
});
</script>
<script src="src/jquery.min.js"></script>
</body>
</html>With this example you can put you own script before load another libraries
<!DOCTYPE HTML>
<html>
<head>
<title>AsyncJS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="src/AsyncJS.js"></script>
</head>
<body>
<ol id="list"></ol>
<script>
// Write first item
var node = document.createElement('li');
var textnode = document.createTextNode("This is FIRST script, but don't use AsyncJS");
node.setAttribute('style','color:gray;');
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
window.async(function(){
var node = document.createElement('li');
var textnode = document.createTextNode("This is the SECOND script and DOES USE AsyncJS.");
node.setAttribute('style','color:green;');
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
});
window.async(function(){
var node = document.createElement('li');
var textnode = document.createTextNode("This is the THIRD script and DOES USE AsyncJS.");
node.setAttribute('style','color:green;');
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
});
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
$('#list').append('<li style="color:green;">This is the fourth script, load <em>jQuery('+$.fn.jquery+')</em> and DOES USE AsyncJS</li>');;
});
window.async('//google.com/not-found', function(){
$('#list').append('<li>This is the fourth script, load jQuery and DOES USE AsyncJS</li>');;
}, function () {
var node = document.createElement('li');
node.setAttribute('style','color:red;');
var textnode = document.createTextNode("This is the fifth script and USE ERROR METHOD");
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
});
// Write second item(because, AsyncJS work after load page), but technically this item is the last item
var node = document.createElement('li');
var textnode = document.createTextNode("This is LAST script, but don't use AsyncJS");
node.setAttribute('style','color:gray;');
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
</script>
</body>
</html>- Google Chrome 4+
- Android & iOS
- Mozilla Firefox 2+
- Android & iOS
- Microsoft Internet Explorer 5.5+
- Microsoft Edge 0.10.10049+
- Desktop, Mobile & Server
- Android Browser 533.1+
- Since Android 2.2
- Safari 3.1+
- Windows & Mac OS
- iOS Safari 3.2+
- iPhone & iPad
[another deviced were not tested]
- iPhone & iPad
- Opera 9.5-9.6+
- Opera Mini 5.0+