JavaScript判断页面加载完之后再执行预定函数的技巧_javascript技巧

2、的是，当事件处理与对应元索绑定起来的吋候，只冇在那个元索加载完Z后才能进行操作。如杲说把处理的脚木放在了head区域，浏览器会报错。因为下而的HTML元素述没冇加载出来，head中的处理脚本已经被处理了。一个好的执行JavaScript代码的方法应该是行为内容分离的、在页面加载后处理的。所以，处理JavaScript代码我们要用到监听器和window对象的load事件。监听器监听器实际上的功能就是行为与内容分离的。以前需要在HTML屮加上一些触发事件来触发JavaScript的相关函数，而现在直接在JavaScript中对某个元素的使用监听器，监听这个元素的事件，如果这个元

3、素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数，那么就会处理这个函数。W3C的标准方法叫做addEvcntListoner,被IE9,chrome,firefox,opera所支持，写法：window.addEventListener('load',function,false);早期IE中有attachEvcnt方法效果类似:window,attachEvent('onload',function);使用监听器的方法也很简单，就是先获取页而屮的某个元素，然后对这个元素使用监听器，定义监听的事件和对应的事件处理函数，就上文例子：document.getElem

4、entById('link').addEventListener('click',fun,false)f关于监听器更加详细的使用说明，请见文末补充资料。window,onload事件onload事件只有在整个页面已经完全载入的时候才会被触发，我们将JavaScript代码写进onload事件中,就可以保证在HTML元素被加载完成之后，浏览器才会处理我们的JavaScript代码。基础的写法:window・onload=function(){//code}这样，这个函数里而的code会在加载完成Z后被处理。但是，这种方法冇个缺陷，就是只能用于这一个函数。页而屮无法出现多个wi

5、ndow,onload事件，如果出现了多个onload事件，那么后面的内容会覆盖前面的。那么，我们可以这样做，在一个window,onload事件屮，写上所有需要加载的函数名，然后在外面定义函数：window.onload=function(){fund();func2();}functionfuncl(){•••}functionfunc2(){•••}这样做虽然可以，但是很不方便，因为我们需要把所自要加载的函数名都写进去,修改起来就会很麻烦。当然办法肯定是有的，jQuery就特别提供了很强大的多脚本加载方法，那么原生的JavaScript肯定也有办法。window,on

6、load同时处理多个函数我们需要编写一个处理函数，先看一下代码：funclionaddLoadListener(fn){if(typeofwindow.addEventListener!="undefined'){window.addEventListener('load',fn,false);}elseif(typeofdocument.addEventListener!=^undefined"){document.addEventListener('load',fn,false);}elseif(typeofwindow,attachEvent!二'undefined，

7、){window.attachEvent('onloacT,fn);}else{varoldfn=window,onload;if(typeofwindow,onload!="function'){window,onload二fn;}else{window.onload二function(){oldfn();fn();}；}简单的来解析一下，这个自定义的addLoadListener函数，传递一个函数名称作为参数。它首先判断浏览器是否支持相关的监听器，如果支持监听器，就使用监听器监听window对彖的onload事