JavaScript判断页面加载完之后再执行预定函数的技巧
JavaScript脚本语言的执行，是需要触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。
<divid=”link”onclick=”fun()”></div>
上面代码的意思就是，当鼠标点击id为link的元素的时候，就触发了它的onclick事件，然后执行使用JavaScript定义的fun函数。这样的做法肯定是很不合理的，因为触发操作直接写进了HTML结构里面，内容和行为没有隔离开，对日后的二次开发或者修改带来不便。
需要注意的是，当事件处理与对应元素绑定起来的时候，只有在那个元素加载完之后才能进行操作。如果说把处理的脚本放在了head区域，浏览器会报错。因为下面的HTML元素还没有加载出来，head中的处理脚本已经被处理了。
一个好的执行JavaScript代码的方法应该是行为内容分离的、在页面加载后处理的。所以，处理JavaScript代码我们要用到监听器和window对象的load事件。
监听器
监听器实际上的功能就是行为与内容分离的。以前需要在HTML中加上一些触发事件来触发JavaScript的相关函数，而现在直接在JavaScript中对某个元素的使用监听器，监听这个元素的事件，如果这个元素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数，那么就会处理这个函数。
W3C的标准方法叫做addEventListener，被IE9，chrome，firefox，opera所支持，写法：
window.addEventListener(‘load',function,false);
早期IE中有attachEvent方法效果类似：
window.attachEvent(‘onload',function);
使用监听器的方法也很简单，就是先获取页面中的某个元素，然后对这个元素使用监听器，定义监听的事件和对应的事件处理函数，就上文例子：
document.getElementById(‘link').addEventListener(‘click',fun,false);
关于监听器更加详细的使用说明，请见文末补充资料。
window.onload事件
onload事件只有在整个页面已经完全载入的时候才会被触发，我们将JavaScript代码写进onload事件中，就可以保证在HTML元素被加载完成之后，浏览器才会处理我们的JavaScript代码。基础的写法：
window.onload=function(){
//code
}
这样，这个函数里面的code会在加载完成之后被处理。但是，这种方法有个缺陷，就是只能用于这一个函数。页面中无法出现多个window.onload事件，如果出现了多个onload事件，那么后面的内容会覆盖前面的。
那么，我们可以这样做，在一个window.onload事件中，写上所有需要加载的函数名，然后在外面定义函数：
window.onload=function(){
func1();
func2();
}
functionfunc1(){…}
functionfunc2(){…}
这样做虽然可以，但是很不方便，因为我们需要把所有要加载的函数名都写进去，修改起来就会很麻烦。当然办法肯定是有的，jQuery就特别提供了很强大的多脚本加载方法，那么原生的JavaScript肯定也有办法。
window.onload同时处理多个函数
我们需要编写一个处理函数，先看一下代码：
functionaddLoadListener(fn){
if(typeofwindow.addEventListener!=‘undefined'){
window.addEventListener(‘load',fn,false);
}elseif(typeofdocument.addEventListener!=‘undefined'){
document.addEventListener(‘load',fn,false);
}elseif(typeofwindow.attachEvent!=‘undefined'){
window.attachEvent(‘onload',fn);
}else{
varoldfn=window.onload;
if(typeofwindow.onload!=‘function'){
window.onload=fn;
}else{
window.onload=function(){
oldfn();
fn();
};
}
}
}
简单的来解析一下，这个自定义的addLoadListener函数，传递一个函数名称作为参数。它首先判断浏览器是否支持相关的监听器，如果支持监听器，就使用监听器监听window对象的onload事件，然后处理这个函数。这段代码使用if语句判断了所有浏览器的监听事件，是跨浏览器兼容的。
我们把这段代码放在JavaScript代码段的最上面，然后在下面定义相关函数，然后使用下面语句来加载JavaScript函数了。
addLoadListener(func);
functionfunc(){…}
这样，有什么JavaScript函数是需要在页面加载完成之后处理的，直接使用addLoadListener函数即可，而且可以使用多个。通常来说，所有的JavaScript最好都使用onload事件加载，以避免意外情况发生。