高性能JS--载入脚本并执行

一般现代浏览器通过侦听事件获得脚本加载完成时的状态

var script = document.createElement('script');
script.type = 'text/javascript';
//Firefox, Chrome
script.onload = function(){
  alert('script loaded!');
};
script.src = 'http://code.jquery.com/jquery-1.4.2.min.js';
document.getElementsByTagName('head')[0].appendChild(script);

1. ie支持另外一种方式，会触发readystatechange事件

   loading:开始下载

   complete:所有数据已准备就绪

   

   var script = document.createElement('script');
   script.type = 'text/javascript';
   //IE
   script.onreadystatechange = function(){
       if(script.readyState == 'loaded' || script.readyState == 'complete'){
           script.onreadystatechange = null;
           alert('Script loaded');
       }
   }
   script.src = 'http://code.jquery.com/jquery-1.4.2.min.js';
   document.getElementsByTagName('head')[0].appendChild(script);

   

2. 兼容方法

   

   /**
   * 载入脚本
   * @param {String} url 载入的地址
   * @param {Function} callback 载入后需执行的函数
   */
   function loadScript(url, callback){
     var script = document.createElement('script');
     script.type = 'text/javascript';
     //IE
     if(script.readyState){
         script.onreadystatechange = function(){
             if(script.readyState == 'loaded' || script.readyState == 'complete'){
                 script.onreadystatechange = null;
                 callback();
             }
         }
     } else { //非IE
         script.onload = function(){
             callback();
         }
     }
     script.src = null;
     document.getElementsByTagName('head')[0].appendChild(script);
   }
   //example
   loadScript('http://code.jquery.com/jquery-1.4.2.min.js', function(){
     alert('File is loaded!');
   })

   

3. XMLRequest脚本注入

   

   var xhr = new XMLHttpRequest();
   xhr.open('get', 'http://code.jquery.com/jquery-1.4.2.min.js', true);
   xhr.onreadystatechange = function(){
       if(xhr.readySate == 4){
           if(xhr.status >= 200 && shr.status < 300 || xhr.status == 304){ //200 有效响应; 304 从缓存读取
               var script = document.createElement('script');
               script.type = 'text/javascript';
               script.text = xhr.responseText;
               document.body.appendChild(script);
           }
       }
   };
   xhr.send(null);

   

本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2011/06/19/2084578.html，如需转载请自行联系原作者