页面载入过程分析和包装页面load事件

页面载入过程分析：

 1.HTML is parsed.
 2.External scripts/style sheets are loaded.
 3.Scripts are executed as they are parsed in the document.
 4.HTML DOM is fully constructed.
 5.Images and external content are loaded.
 6.The page is finished loading.

在一般情况下，第四个步骤完成后我们就可以看作是页面载入完成，可以执行load事件的代码了。但是在浏览器的load事件中，要等第六个步骤完成后才会响应该事件，所以，为了更快地响应，我们可以每过一定时间检查html是否已载入完成，如果已经完成，则马上响应事件，不必要等待第五个步骤了。

通过包装，可以达到以下几个要求：

1.支持添加任意多个响应事件，这个跟addEventListener类似。

2.可以在任何时候添加，这是一个功能增强，即在load事件已经响应后还能补充一些响应代码。

为达到这几个目的，可以定义两个方法，一个用于保存和处理事件响应代码，另一个用于响应load事件，执行代码。

//通过此方法可以添加任意事件响应代码

function domReady(func){

    //页面已载入，立即执行
    if(domReady.done) return func();

    //已经有响应代码了，加入到响应队列
    if(domReady.timer){
        domReady.ready.push(func);
    }else{

        //还未有响应代码加入，为window添加load事件,如果load事件先响应则停止检测，直接执行响应代码

        if(window.addEventListener){

            window.addEventListener("load",isDomReady,false);

        }else{

            window.attachEvent("onload",isDomReady);

        }
        //将响应代码加入到响应队列，并以13毫秒为间隔定时检查html页面是否载入完毕。
        domReady.ready=[func];
        domReady.timer=setInterval(isDomReady,13);
    }
};

//响应load事件，执行代码
function isDomReady(){

    //已经响应过了，直接返回，以避免响应多次
    if(domReady.done)return false;

    //通过检测document对象和它的属性判断html页面是否已经载入完毕并可以通过dom的方法处理页面
    if ( document && document.getElementsByTagName && document.getElementById && document.body ) {

        //页面已载入完成，dom结构也生成可以使用了，清除定时检测器，不再检测,并把响应标记为已完成
        clearInterval( domReady.timer );
        domReady.timer = null;

        domReady.done = true;

        //按加入顺序执行响应代码
        for ( var i = 0; i < domReady.ready.length; i++ )
            domReady.ready[i]();

        //清除响应队列，
        domReady.ready = null;      
    }
};

 

这样，通过调用domReady方法便可以向页面的load事件中加入任意多个响应方法了。