异步脚本加载 JS Loader

tomjamescn

偷懒，将别人的东西直接贴过来吧，文章来自http://foxling.org/js-ajax-dom/async-loading-js/

---------------------------分割线

JS会阻塞其它页面资源的下载，通过对JS的异步加载可以解决这个问题，加快页面内容的呈现速度。获得更好的体验。

使用script标签加载 通过firebug查看各种资源加载状态，当test.js下载完毕后，图片才开始下载。

通过firebug查看各种资源加载状态，当test.js下载完毕后，图片才开始下载。

猛击测试页面block.html

使用JSLoader异步加载JS

当使用异步加载方式加载JS时，test.js与图片同时加载，加快了页面的呈现：

猛击测试页面js-loader

JSLoader

JSLoader.load(url, [fun1], [funN]);
参数：
url 要加载的JS的地址
fun 依赖该JS执行的函数

使用示例：

1. JSLoader.load('test.js', function(){
   
2.     document.getElementById('test').innerHTML = test;
   
3. });

猛击这里下载JSLoader.js

JSLoader源码：

1. var JSLoader = function(){
   
2. 
   
3.     var scripts = {};
   
4. 
   
5.     function getScript(url){
   
6.         var script = scripts[url];
   
7.         if (!script){
   
8.             script = {loaded:false, funs:[]};
   
9.             scripts[url] = script;
   
10.             add(script, url);
    
11.         }
    
12.         return script;
    
13.     }
    
14. 
    
15.     function run(script){
    
16.         var funs = script.funs,
    
17.             len = funs.length,
    
18.             i = 0;
    
19. 
    
20.         for (; i < len; i++){
    
21.             var fun = funs.pop();
    
22.             fun();
    
23.         }
    
24.     }
    
25. 
    
26.     function add(script, url){
    
27.         var scriptdom = document.createElement('script');
    
28.         scriptdom.type = 'text/javascript';
    
29.         scriptdom.loaded = false;
    
30.         scriptdom.src = url;
    
31. 
    
32.         scriptdom.onload = function(){
    
33.             scriptdom.loaded = true;
    
34.             run(script);
    
35.             scriptdom.onload = scriptdom.onreadystatechange = null;
    
36.         };
    
37. 
    
38.         //for ie
    
39.         scriptdom.onreadystatechange = function(){
    
40.             if ((scriptdom.readyState === 'loaded' ||
    
41.                     scriptdom.readyState === 'complete') && !scriptdom.loaded) {
    
42. 
    
43.                 run(script);
    
44.                 scriptdom.onload = scriptdom.onreadystatechange = null;
    
45.             }
    
46.         };
    
47. 
    
48.         document.getElementsByTagName('head')[0].appendChild(scriptdom);
    
49.     }
    
50. 
    
51.     return {
    
52.         load: function(url){
    
53.             var arg = arguments,
    
54.                 len = arg.length,
    
55.                 i = 1,
    
56.                 script = getScript(url),
    
57.                 loaded = script.loaded;
    
58. 
    
59.             for (; i < len; i++){
    
60.                 var fun = arg[i];
    
61.                 if (typeof fun === 'function'){
    
62.                     if (loaded) {
    
63.                         fun();
    
64.                     }else{
    
65.                         script.funs.push(fun);
    
66.                     }
    
67.                 }
    
68.             }
    
69.         }
    
70.     };
    
71. }();