手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:loader

js Loader

Submitted by gouki on 2009, May 22, 4:41 PM

Javascript的后加载，很多人都写过，这是为了防止最初加载的JS过多影响网速 。看到风雪之隅写了一个，看上去挺漂亮就转载了一下。。。

原文：http://www.laruence.com/2009/05/21/829.html

示例：

JavaScript代码
  1. var loader = Loader;  
  2.   loader.onReady = function(){  
  3.      alert('全部载入完成');  
  4.   }  
  5.       
  6.   loader.on('onLoad', function(name) {  
  7.       alert(name + '载入完成');  
  8.   });  
  9.   loader.load([  
  10.       'http://www.laruence.com/1.js',  
  11.       'http://www.laruence.com/test.js',  
  12.       'http://www.laruence.com/main.js'  
  13.     ]  
  14.   );  


源码：

JavaScript代码
  1. /** 
  2.  * Eve Js Loader 
  3.  * @version 1.0.1 
  4.  * @author laruence<laruence at yahoo.com.cn> 
  5.  * @copyright (c) 2009 www.laruence.com 
  6.  */  
  7.    
  8. /** 
  9.  * a global object instance, you can easily change to a class definition 
  10.  */  
  11. var Loader = {  
  12.     /** 
  13.      * @var onLoad  when load a individual file completed , 
  14.      * this event will be fired * @param string name  loaded script file name 
  15.      */  
  16.     onLoad : function(name){},  
  17.     /** 
  18.      * @var onReady when all scripts loaded, this event will be fired 
  19.      */  
  20.     onReady : function(){},  
  21.     /** 
  22.      * a empty constructor 
  23.      */  
  24.     init : function(container) {  
  25.     },  
  26.     /** 
  27.      * a empty error handler 
  28.      */  
  29.     handlerError : function(e) {  
  30.         alert(e);  
  31.     },  
  32.     /** 
  33.      * event register 
  34.      * @param string evt  event name 
  35.      * @param function handler 
  36.      */  
  37.     on : function(evt, handler) {  
  38.         switch ( evt.toLowerCase() ) {  
  39.             case 'load' :  
  40.                 this.onLoad = handler;  
  41.             break;  
  42.             case 'ready' :  
  43.                 this.onReady = handler;  
  44.             break;  
  45.             default :  
  46.             break;  
  47.         }  
  48.         return true;  
  49.      },  
  50.     /** 
  51.      * private method 
  52.      */  
  53.     _load : function(path, callback) {  
  54.         try {  
  55.             var script = document.createElement('script');  
  56.             script.src = path;  
  57.             script.type = "text/javascript";  
  58.             document.getElementsByTagName("head")[0].appendChild(script);  
  59.             if( script.addEventListener ) {  
  60.                 script.addEventListener("load", callback, false);  
  61.             } else if(script.attachEvent) {  
  62.                 script.attachEvent("onreadystatechange", function(){  
  63.                         if(script.readyState == 4  
  64.                             || script.readyState == 'complete'  
  65.                             || script.readyState == 'loaded') {  
  66.                             callback();  
  67.                         }  
  68.                 });  
  69.             }  
  70.         } catch(e) {  
  71.             this.handlerError(e);  
  72.             callback();  
  73.         }  
  74.     },  
  75.     /** 
  76.      * start loding process 
  77.      * @param array scripts  files want to be loaded 
  78.      */  
  79.     load : function(scripts) {  
  80.         var total = scripts.length;  
  81.         var _self  = this;  
  82.         var indicator = arguments[1] || 0;  
  83.         if ( indicator >= total ) {  
  84.             _self.onReady();  
  85.             return true;  
  86.         }  
  87.    
  88.         var callee = arguments.callee;  
  89.         var script = scripts[indicator];  
  90.         this._load(script, function() {  
  91.             _self.onLoad(script);  
  92.             callee.apply(_self, [scripts, ++indicator]);  
  93.         });  
  94.         return true;  
  95.     }  
  96. }  


说到这里，其实，又让我想起了code.google.com提供的googleapi的加载方式，他提供了一些常用JS类库的加载，首先，它加载了googleapi：http://www.google.com/jsapi，然后就可以调用了

XML/HTML代码
  1. <script src="http://www.google.com/jsapi"></script>  
  2. <script>  
  3.   // Load jQuery  
  4.   google.load("jquery", "1");  
  5.   
  6.   // on page load complete, fire off a jQuery json-p query  
  7.   // against Google web search  
  8.   google.setOnLoadCallback(function() {  
  9.     $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",  
  10.   
  11.       // on search completion, process the results  
  12.       function (data) {  
  13.         if (data.responseData.results &&  
  14.             data.responseData.results.length > 0) {  
  15.           var results = data.responseData.results;  
  16.             
  17.           for (var i=0; i < results.length; i++) {  
  18.             // Display each result however you wish  
  19.             alert(results[i].titleNoFormatting);  
  20.           }      
  21.         }  
  22.           
  23.       });  
  24.     });  
  25. </script>  

方式和原理差不多。仅作参考吧。。。

Tags: loader

Javascript | 评论:0 | 阅读:17977