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/