【js学习笔记-093】------文档加载事件

文档加载事件

大部分web应用都需要web浏览器通知它们文档加载完毕和为操作准备就绪的时间。Window对象的load事件就是为了这个目的，load事件直到文档和所有图片加载完毕时才发生。然而，在文档完全解析之后但在所有图片全部加载完毕之前开始运行脚本通常是安全的。所以如果基于“load”发生之前的事件触发脚本会提升web应用的启动时间。

当文档加载解析完毕且所有延迟脚本都执行完毕时会触发DOMContentLoaded事件，此时图片和异步脚本可能依旧在加载，但是文档已经准备就绪。Firefox引入了这个事件，然后它被包括microsoft的IE9在内的其它厂商采用。

Document.readyState属性随着文档加载过程而变，在IE中，每次状态改变都伴随着Document对象上的readystatechange事件，当IE接收到”complete”状态时使用这个事件来做判断是可行的。Html5标准化了readystatechange事件，但它仅在load事件之前立即触发，所有目前尚不清楚监听’readystatechange’取代“load”会带来多大好处。

//传递 函数给whenReady()，当文档解析完毕且为操作准备就绪时，

//函数将作为文档对象的方法调用

//一旦文档准备就绪，所有函数都将被调用，任何传递给whenReady()的函数都将立即调用

 

var whenReady = (function(){

var funcs = [];//当获得事件时，要运行的函数

var ready =false; //当触发事件处理程序时，切换到true

function  handler(e){

    if(ready) return;

    if(e.type===”readystatechange” &&document.readyState !==”complete”)return;

    for(var i=0;i<funcs.length;i++){

      funcs[i].call(document);

    }

    ready = true;

    funcs = null;

}

if(document.addEventListener){

   document.addEventListener(“DOMContentloaded”,handler,false);

document.addEventListener(“readystatechange”,handler,false);

document.addEventListener(“load”,handler,false);

}else if(document.attachEvent){

     document.attachEvent(“onreadystatechange”,handler);

     window.attachEvent(“onload”,handler);

}

//

return   function   whenReady(f){

     if(ready) f.call(document)

     else funcs.push(f); //否则，加入队列等候

} 

})();