在HTML文档完成加载之前,DOM是不完整的。此时如果执行js代码,测试的准确性就无从谈起,所以我们必须让这个函数在网页加载完毕之后才得到执行。我们常用的方法就是:
window.onload = 某个函数;
注:这条浅显易懂语句可以使用,但有时不太适用(当页面加载完成需要执行多个函数时)
假设我们有两个函数,firstFunction()和secondFunction(),如果我想让他们俩都在页面加载时执行,那么我们可能会这样做:
window.onload = firstFunction;
window.onload = secondFunction;
注:这个技巧简单实用,但是不适合函数很多的场合,所以下面介绍一个好的方法addLoadEvent()函数
下面看一个简单的例子吧!
/**
* @author wang_keke
*/
function addLoadEvent(func){
//把widow.onload存储在一个变量中
var oldonload = window.onload;
//如果当前不存在要加载的函数,加载最新传入的函数
if(typeof window.onload != 'function'){
window.onload = func;
}else{
//如果已经存在要加载的函数,执行原来的函数,
//并把新引入的函数放在该函数后面执行,自我感觉有点像递归函数一样
window.onload = function(){
oldonload();
func();
};
}
}
/*
把页面加载完成要执行的函数添加到队列中,依次执行
* */
addLoadEvent(showOne);
addLoadEvent(showTwo);
addLoadEvent(showThree);
/*
以下是几个测试函数
*/
function showOne(){
alert("我是showOne()函数,one,one,one!");
}
function showTwo(){
alert("我是showTwo()函数,two,two,two!");
}
function showThree(){
alert("我是showThree()函数,three,three,three!");
}
代码的功能就是在页面加载完成时,依次执行showOne(),showTwo(),showThree()方法。