onload 与 动态添加DOM元素

1、func1中涉及到了页面dom元素的 *** 作，如果不放在onload事件中而是直接运行，那么这时候页面的dom元素（比如ul）极可能尚未加载到内存，会造成 *** 作失败。放在onload中，则可百分百保证整个页面的dom结构都已加载到内存，这样就能保证运行成功了。

2、alert()是系统级的模态提示框，它在显示的时候，整个脚本都会暂停运行（或者叫“挂起”），关闭提示框后才会继续运行。也就是说，表面上看func2是比func1先运行的，但其实func1确实是先运行的，但即使电脑的运行速度再快，运行总是要花时间的，而就在func1努力运行但尚未显示出结果时，func2的alert已经d出来并把整个脚本暂停了，这样func1就僵在那了，看起来就好像是它还没运行一样。

3、没有完美的解决办法，要么你可以自建一个非模态的提示框，要么可以采用延时执行的方式，比如：

window.onload=function(){

    func1()

    setTimeout(func2,100)

}

动态加载外部css样式及css样式，参考代码如下：

// 动态加载外部js文件 

var flag = true 

if( flag ){ 

loadScript( "js/index.js" ) 

} 

function loadScript( url ){ 

var script = document.createElement( "script" ) 

script.type = "type/javascipt" 

script.src = url 

document.getElementsByTagName( "head" )[0].appendChild( script ) 

} 

// 动态加载js 

if( flag ){ 

var script = document.createElement( "script" ) 

script.type = "text/javascript" 

script.text = " " 

document.getElementsByTagName( "head" )[0].appendChild( script ) 

} 

// 动态加载外部css样式 

if( flag ){ 

loadCss( "css/base.css" ) 

} 

function loadCss( url ){ 

var link = document.createElement( "link" ) 

link.type = "text/css" 

link.rel = "stylesheet" 

link.href = url 

document.getElementsByTagName( "head" )[0].appendChild( link ) 

} 

// 动态加载css样式 

if( flag ){ 

var style = document.createElement( "style" ) 

style.type = "text/css" 

document.getElementsByTagName( "head" )[0].appendChild( style ) 

var sheet = document.styleSheets[0] 

insertRules( sheet,"#gaga1","background:#f00",0 ) 

} 

function insertRules( sheet,selectorTxt,cssTxt,position ){ 

if( sheet.insertRule ){ // 判断非IE浏览器 

sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position ) 

}else if( sheet.addRule ){ //判断是否是IE浏览器 

sheet.addRule( selectorTxt ,cssTxt ,position ) 

} 

}

---