动态加载js的方法

  最近在维护一个项目，看到一个页面竟然要加载20多个js文件！！！真惊人，仔细观察后，发现有很多js文件根本用不上的，或者在某个条件成立才使用的；为了提高此页面的性能，决定使用动态加载js文件的方法，即在需要的时候才加载该js文件。

      网上看了很多关于动态加载js的方法，例子挺多的，但是都有些不足的地方。

      动态加载js文件一般用于引入的js文件太多或者不是必要的，而在满足某种条件下，需要此js文件了，才加载。

      比较满意的方法有两个：

     （1）通用方法：

     

[javascript]
view plaincopyprint?

function JsLoader(){  
this.load=function(url){  
         //获取所有的<script>标记   
         var ss=document.getElementsByTagName("script");  
         //判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回
  
         for (i=0;i<ss.length;i++){  
             if (ss[i].src && ss[i].src.indexOf(url)!=-1){  
                 this.onsuccess();  
                 return;  
             }  
         }  
         //创建script结点,并将其属性设为外联JavaScript文件   
         s=document.createElement("script");  
         s.type="text/javascript";  
         s.src=url;  
         //获取head结点，并将<script>插入到其中   
         var head=document.getElementsByTagName("head")[0];  
         head.appendChild(s);  
           
         //获取自身的引用   
         var self=this;  
         //对于IE浏览器，使用readystatechange事件判断是否载入成功
  
         //对于其他浏览器，使用onload事件判断载入是否成功
  
         //s.onload=s.onreadystatechange=function(){
  
         s.onload=s.onreadystatechange=function(){  
             //在此函数中this指针指的是s结点对象，而不是JsLoader实例,
  
             //所以必须用self来调用onsuccess事件，下同。
  
             if (this.readyState && this.readyState=="loading") return;  
             self.onsuccess();  
         }  
         s.onerror=function(){  
             head.removeChild(s);  
             self.onfailure();  
         }  
     }  
}  
  
/**使用方法 
 *  var jsLoader=new JsLoader(); 
 *sLoader.onsuccess=function(){}成功时执行的方法 
 *jsLoader.onfailure=function(){}失败时执行的方法 
 * jsLoader.load("hello.js"); 
**/  

function JsLoader(){
this.load=function(url){
//获取所有的<script>标记
var ss=document.getElementsByTagName("script");
//判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回
for (i=0;i<ss.length;i++){
if (ss[i].src && ss[i].src.indexOf(url)!=-1){
this.onsuccess();
return;
}
}
//创建script结点,并将其属性设为外联JavaScript文件
s=document.createElement("script");
s.type="text/javascript";
s.src=url;
//获取head结点，并将<script>插入到其中
var head=document.getElementsByTagName("head")[0];
head.appendChild(s);

//获取自身的引用
var self=this;
//对于IE浏览器，使用readystatechange事件判断是否载入成功
//对于其他浏览器，使用onload事件判断载入是否成功
//s.onload=s.onreadystatechange=function(){
s.onload=s.onreadystatechange=function(){
//在此函数中this指针指的是s结点对象，而不是JsLoader实例,
//所以必须用self来调用onsuccess事件，下同。
if (this.readyState && this.readyState=="loading") return;
self.onsuccess();
}
s.onerror=function(){
head.removeChild(s);
self.onfailure();
}
}
}

/**使用方法
* var jsLoader=new JsLoader();
*sLoader.onsuccess=function(){}成功时执行的方法
*jsLoader.onfailure=function(){}失败时执行的方法
* jsLoader.load("hello.js");
**/     

 

      （2）使用jquery 方法动态加载

           前提是必须先引入 jquery.js 包，然后调用jquery里面的方法：

           $.getscript("test.js"); //其中 test.js 是要加载的js文件

 

       小结：方法1看起来比较复杂，但是基本上把此代码写在一个js文件，然后就可以直接使用了。方法2很简单，但是要引入jquery.js文件和要有jquery的基础。