javascript 无阻塞脚本 ,通过dom动态加载

通过Dom的方法, createElement方法来创建动态的script标签,检测标签加载完成是script的onload方法来检测加载成功,而ie里面不支持这个方法,则是onreadystatechange方法来检测.详细看以下代码:

    1. function addScript(src,callBack)  
    2. {  
    3.     var head=document.documentElement.getElementsByTagName("head")[0];  
    4.     var scri=document.createElement("script");  
    5.     scri.type="text/javascript";  
    6.     scri.src=src;  
    7.         //一般在设置src之后再append到dom树里面,  
    8.         //详情 http://www.iefans.net/ie-script-element-readystate/  
    9.     head.appendChild(scri);  
    10.     /*ie browser*/  
    11.     if(document.all)  
    12.     {  
    13.         scri.onreadystatechange=function()  
    14.         {  
    15.             if(scri.readyState=="loaded"||scri.readyState=="complete")  
    16.             {  
    17.                 alert(src+" ie brower 加载完毕!");  
    18.                 callBack&&callBack();  
    19.             }  
    20.         }  
    21.     }  
    22.     /*other browser*/  
    23.     else  
    24.     {     
    25.         scri.onload=function()  
    26.         {  
    27.             alert(src+" not ie brower 加载完毕!");  
    28.             callBack&&callBack();  
    29.         }  
    30.     }  
    31. }  
    32. 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/

posted on 2012-07-30 18:25  All blue  阅读(155)  评论(0)  编辑  收藏  举报

导航