javascript 无阻塞脚本 ,通过dom动态加载
通过Dom的方法, createElement方法来创建动态的script标签,检测标签加载完成是script的onload方法来检测加载成功,而ie里面不支持这个方法,则是onreadystatechange方法来检测.详细看以下代码:
- function addScript(src,callBack)
- {
- var head=document.documentElement.getElementsByTagName("head")[0];
- var scri=document.createElement("script");
- scri.type="text/javascript";
- scri.src=src;
- //一般在设置src之后再append到dom树里面,
- //详情 http://www.iefans.net/ie-script-element-readystate/
- head.appendChild(scri);
- /*ie browser*/
- if(document.all)
- {
- scri.onreadystatechange=function()
- {
- if(scri.readyState=="loaded"||scri.readyState=="complete")
- {
- alert(src+" ie brower 加载完毕!");
- callBack&&callBack();
- }
- }
- }
- /*other browser*/
- else
- {
- scri.onload=function()
- {
- alert(src+" not ie brower 加载完毕!");
- callBack&&callBack();
- }
- }
- }
- addScript("js.js",function(){addScript("js2.js")});
在这段代码里面我异步加载了两个js(js.js和js2.js), 在加载第一个js之后又调用了加载第二个js. 应该注意的是ie里面的onreadystatechange方法里面,判断加载状态(scri.readyState) 的状态有:
• uninitialized – 原始状态
• loading – 下载数据中..
• loaded – 下载完成
• interactive – 还未执行完毕.
• complete – 脚本执行完毕
因为在ie各个版本里面无法确定哪个是加载成功,所以判断了两个状态,下载完成和执行完成两种状态,有关详细的ie中script加载状态请参考:
http://www.iefans.net/ie-script-element-readystate/