JS>> AsyncJS>> 返回
项目作者： olaferlandsen

项目描述 ：
Trick for better speed and compatibility
高级语言： HTML
项目地址: git://github.com/olaferlandsen/AsyncJS.git
创建时间： 2016-05-02T07:27:02Z
项目社区：https://github.com/olaferlandsen/AsyncJS
开源协议：MIT License
下载


Donate

AsyncJS - Trick for better speed and compatibility

NPM Version
NPM Downloads
Node.js Version
Dependency Status
devDependency Status
Build status
Build status
Coverage Status
Build Status
Code Climate
Issue Count
Gitter

Never again will put your javascript in <head></head>!

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

  1. npm i olaferlandsen-asyncjs
  2. ```
  3. ### Download ZIP(unstable)
  4. [Download Unstable](https://github.com/olaferlandsen/AsyncJS/archive/master.zip)
  6. ### Download ZIP(Stable)
  7. [Download Stable](https://github.com/olaferlandsen/AsyncJS/releases/latest)
  9. ### Git Clone

git clone git://github.com/olaferlandsen/AsyncJS.git

  2. ## API
  3. ### Simple load script after load document
  4. ```javascript
  5. window.async(string file);

Example

  1. window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js');

Simple execute script after load document

  1. window.async(function success);

Example

  1. window.async(function(){
  2.     console.log('Hello!');
  3. });

Simple execute script with arguments after load document

  1. window.async(function success[, array arguments]);

Example

  1. window.async(function(name, lastname){
  2.     console.log('Hello '+name+' '+lastname+'!');
  3. }, ['Olaf', 'Erlandsen']);

Advance load script width callback after load document

  1. window.async(string file[, function success]);

Example

  1. window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
  2.     console.log('You load jquery '+ $.fn.jquery);
  3. });

Advance load script width success callback and arguments after load document

  1. window.async(string file[, function success [, array arguments] ]);

Example

  1. window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(protocol){
  2.     console.log('You load jquery '+ $.fn.jquery + ' with protocol: ' + protocol);
  3. }, [window.location.protocol]);

Advance load script width success callback, error callback and arguments after load document

  1. window.async(string file[, function success [, function error] ]);

Example

  1. window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
  2.     console.log('You load jquery '+ $.fn.jquery  );
  3. }, function () {
  4.     console.error('Error when try load file');
  5. });

Advance load script width success callback, error callback and arguments after load document

  1. window.async(string file [, function success [, function error [, array arguments] ] ]);

Example

  1. window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(protocol){
  2.     console.log('You load jquery '+ $.fn.jquery + ' with protocol: ' + protocol);
  3. }, function () {
  4.     console.error('Error when try load file');
  5. }, [window.location.protocol]);

ONLINE DEMO

Click here to open online demo

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)

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>AsyncJS</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <script src="src/AsyncJS.js"></script>
  7.         <!-- No need put jquery here!! :) -->
  8.     </head>
  9.     <body>
  10.         <script>
  11.             window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
  12.                 console.log("Now you can use jQuery and don't need load it on <head> any more :)");
  13.             });
  14.         </script>
  15.     </body>
  16. </html>

SIMPLE DEMO #2

With this example you can put you own jQuery script before load jQuery file

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>AsyncJS</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <script src="src/AsyncJS.js"></script>
  7.     </head>
  8.     <body>
  9.         <script>
  10.             window.async(function(){
  11.                 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 :)");
  12.                 console.log("You jQuery version is " + $.fn.jquery);
  13.             });
  14.         </script>
  15.         <script src="src/jquery.min.js"></script>
  16.     </body>
  17. </html>

ADVANCE DEMO

With this example you can put you own script before load another libraries

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>AsyncJS</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <script src="src/AsyncJS.js"></script>
  7.     </head>
  8.     <body>
  9.         <ol id="list"></ol>
  10.         <script>
  11.             // Write first item
  12.             var node = document.createElement('li');
  13.             var textnode = document.createTextNode("This is FIRST script, but don't use AsyncJS");
  14.             node.setAttribute('style','color:gray;');
  15.             node.appendChild(textnode); 
  16.             document.getElementById("list").appendChild(node);
  19.             window.async(function(){
  20.                 var node = document.createElement('li');
  21.                 var textnode = document.createTextNode("This is the SECOND script and DOES USE AsyncJS.");
  22.                 node.setAttribute('style','color:green;');
  23.                 node.appendChild(textnode);
  24.                 document.getElementById("list").appendChild(node);
  25.             });
  27.             window.async(function(){
  28.                 var node = document.createElement('li');
  29.                 var textnode = document.createTextNode("This is the THIRD script and DOES USE AsyncJS.");
  30.                 node.setAttribute('style','color:green;');
  31.                 node.appendChild(textnode);
  32.                 document.getElementById("list").appendChild(node);
  33.             });
  35.             window.async('//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js', function(){
  36.                 $('#list').append('<li style="color:green;">This is the fourth script, load <em>jQuery('+$.fn.jquery+')</em> and DOES USE AsyncJS</li>');;
  37.             });
  39.             window.async('//google.com/not-found', function(){
  40.                 $('#list').append('<li>This is the fourth script, load jQuery and DOES USE AsyncJS</li>');;
  41.             }, function () {
  42.                 var node = document.createElement('li');
  43.                 node.setAttribute('style','color:red;');
  44.                 var textnode = document.createTextNode("This is the fifth  script and USE ERROR METHOD");
  45.                 node.appendChild(textnode);
  46.                 document.getElementById("list").appendChild(node);
  47.             });
  50.             // Write second item(because, AsyncJS work after load page), but technically this item  is the last item
  51.             var node = document.createElement('li');
  52.             var textnode = document.createTextNode("This is LAST script, but don't use AsyncJS");
  53.             node.setAttribute('style','color:gray;');
  54.             node.appendChild(textnode); 
  55.             document.getElementById("list").appendChild(node);
  56.         </script>
  57.     </body>
  58. </html>

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+