动态载入脚本

loadScript-usage.md

loadScript()方法每次只能载入一个文件，在载入多个文件的时候除了FireFox和Opera能够按照指定的顺序执行脚本。其他都懒起都无法按照指定顺序执行脚本。可以使用嵌套回调的方式解决这个问题。

loadScript('a.js', function(){
	loadScript('b.js', function(){
		loadScript('c.js', function(){
			loadScript('d.js', function(){
				// do something
			});
		});
	});
});

loadScript.js

/**
 * @param scriptUrl {String} 指定脚本文件
 * @param callback {Function} 载入脚本后的回调
 */
function loadScript(scriptUrl, 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();
    }
  }
  
  // appendTo HTML
  script.src = scriptUrl;
  document.getElementsByTagName('head')[0].appendChild(script);
}

readystatechange-code.md

IE中的readystatechange事件中，script元素带有一个readyState属性，这个属性表示当前script所绑定的下载脚本的状态。

1. 'uninitialzed' - 默认状态
2. 'loading' - 下载开始
3. 'loaded' - 下载完成
4. 'interactive' - 下载完成不可用
5. ’complete' - 一切就绪

但是readyState属性值的出现顺序很难预测，通常根据loaded和complete状态来确定脚本载入完成。这两个值的顺序不一致，因而一旦某个值出现立刻清除readystatechange事件。

关于异步载入脚本.md

IE:

script元素的defer属性控制页面解析到script元素时下载脚但不执行。FireFox3.5支持这个属性。

note: defer控制的下载不执行脚本始终会在onload之前执行。

HTML5:

script元素新增了一个async属性用于异步加载并执行脚本，但不阻塞页面的加载，会在脚本下载完成时立即执行脚本。无法保证顺序