https://github.com/olaferlandsen/asyncjs
Trick for better speed and compatibility
https://github.com/olaferlandsen/asyncjs
async-js asynchronous javascript
Last synced: 3 months ago
JSON representation
Trick for better speed and compatibility
- Host: GitHub
- URL: https://github.com/olaferlandsen/asyncjs
- Owner: olaferlandsen
- License: mit
- Created: 2016-05-02T07:27:02.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-10T04:09:16.000Z (over 8 years ago)
- Last Synced: 2025-02-11T16:40:31.015Z (4 months ago)
- Topics: async-js, asynchronous, javascript
- Language: HTML
- Homepage: http://olaferlandsen.github.io/AsyncJS
- Size: 52.7 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8TJZSNT5JQUXL)
# AsyncJS - Trick for better speed and compatibility
[](https://www.npmjs.com/package/olaferlandsen-asyncjs)
[](https://www.npmjs.com/package/olaferlandsen-asyncjs)
[](https://www.npmjs.com/package/olaferlandsen-asyncjs)
[](https://david-dm.org/olaferlandsen/AsyncJS)
[](https://david-dm.org/olaferlandsen/AsyncJS#info=devDependencies)
[](https://www.codeship.io/projects/149616)
[](https://ci.appveyor.com/project/olaferlandsen/asyncjs/branch/master)
[](https://coveralls.io/github/olaferlandsen/AsyncJS?branch=master)
[](https://travis-ci.org/olaferlandsen/AsyncJS)
[](https://codeclimate.com/github/olaferlandsen/AsyncJS)
[](https://codeclimate.com/github/olaferlandsen/AsyncJS)
[](https://gitter.im/olaferlandsen/AsyncJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
## Never again will put your javascript in ``!
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 to `http://`
## Install & Download
### NPM Install
````
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
```javascript
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js');
```
### Simple execute script after load document
```javascript
window.async(function success);
```
Example
```javascript
window.async(function(){
console.log('Hello!');
});
```
### Simple execute script with arguments after load document
```javascript
window.async(function success[, array arguments]);
```
Example
```javascript
window.async(function(name, lastname){
console.log('Hello '+name+' '+lastname+'!');
}, ['Olaf', 'Erlandsen']);
```
### Advance load script width callback after load document
```javascript
window.async(string file[, function success]);
```
Example
```javascript
window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
console.log('You load jquery '+ $.fn.jquery);
});
```
### Advance load script width success callback and arguments after load document
```javascript
window.async(string file[, function success [, array arguments] ]);
```
Example
```javascript
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]);
```
### Advance load script width success callback, error callback and arguments after load document
```javascript
window.async(string file[, function success [, function error] ]);
```
Example
```javascript
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');
});
```
### Advance load script width success callback, error callback and arguments after load document
```javascript
window.async(string file [, function success [, function error [, array arguments] ] ]);
```
Example
```javascript
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]);
```
## ONLINE DEMO
[Click here to open online demo](http://htmlpreview.github.io/?https://github.com/olaferlandsen/AsyncJS/blob/master/demo/example.html)
## SIMPLE DEMO #1
> With this example you can put you own jQuery script and execute it only if jQuery file is loaded by AsyncJS(if it possible)
```html
AsyncJS
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 :)");
});
```
## SIMPLE DEMO #2
> With this example you can put you own jQuery script before load jQuery file
```html
AsyncJS
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);
});
```
## ADVANCE DEMO
> With this example you can put you own script before load another libraries
```html
AsyncJS
// 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);
```
## Browser Support
* 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]`
* Opera 9.5-9.6+
* Opera Mini 5.0+