标签：
1、动态脚本元素
var script = document.createElement(‘script‘); script.type = ‘text/javascript‘; script.onload = function(){//非IE alert(‘script loaded‘); }; script.onreadystatechange = function(){//IE if(script.readyState == ‘loaded‘ || script.readyState == ‘complete‘){ script.onreadystatechange = null; alert(‘script loaded‘); } }; script.src = ‘file1.js‘; document.getElementsByTagName(‘head‘)[0].appendChild(script);
onreadystatechange 有五个值：如下
uninitialized |
初始状态 |
loading |
开始下载 |
loaded |
下载完成 |
interactive |
数据完成下载但尚不可用 |
complete |
所有数据已准备就绪 |
动态加载脚本的兼容性写法
function loadScript(url,callback){ var script = document.createElement(‘script‘); script.type = ‘text/javascript‘; if(script.readyState){//IE if(script.readyState == ‘loaded‘ || script.readyState == ‘complete‘){ script.onreadystatechange = null; callback(); } }else{ script.onload = function(){//非IE callback(); }; } script.src = url; document.getElementsByTagName(‘head‘)[0].appendChild(script); }
使用方法如下：
loadScript(‘file1.js‘,function(){ alert(‘file is loaded!‘); }); loadScript(‘file1.js‘,function(){ loadScript(‘file2.js‘,function(){ loadScript(‘file3.js‘,function(){ alert(‘all files are loaded!‘); }); }); });
XMLHttpRequest 脚本注入
var xhr = new XMLHttpRequest(); xhr.open(‘get‘,‘file1.js‘,true); xhr.onreadystatechange = function(){ if(readyState == 4){ if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ var script = document.createElement(‘script‘); script.type = ‘text/javascript‘; script.src = xhr.responseText; document.body.appendChild(script); } } }
通过get请求一个js文件。 http状态码 2xx表示有效响应，304表示从缓存读取
缺点是该代码不支持跨域，针对走cdn的文件不能采用这个方法
动态加载js的通用工具可以在下面地址获取
https://github.com/rgrove/lazyload/
使用方法如下：
LazyLoad.js(‘file1.js‘,function(){ alert(‘file is loaded‘); }); //按顺序加载多个文件 LazyLoad.js([‘1.js‘,‘2.js‘],function(){ alert(‘file is loaded‘); });
第二种
LABjs
http://labjs.com/
用法举例
$LAB.script(‘file.js‘).wait(function(){ //初始化 }); //lab script方法用来下载文件，wait方法用来指定文件下载并执行完毕后所调用的函数。支持链式调用 $LAB.script(‘1.js‘) .script(‘2.js‘) .wait(function(){ //初始化 });
前面的举例中1.js不一定会保证在2.js前调用。要保证这一点可以这么写
$LAB.script(‘1.js‘).wait() .script(‘2.js‘) .wait(function(){ //初始化 });
以上都是比较好的动态加载js的方式，且不会阻塞浏览器！
例子和说明参考来自《高性能javascript》第一章
标签：
原文地址：http://www.cnblogs.com/shizhouyu/p/5209225.html
