JavaScript addLoadEvent函数使用详解

在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()方法。

代码中已经加了详细的注释，不再一一说明了，引入外部js文件，执行html代码即可，下面上个效果图！