jQuery 中ready与load事件

jquey有3种针对文档加载的方法：

//document ready
$(document).ready(function(){
        //...代码...
})

//document ready 简写
$(function(){
     //...代码...
})

// document load
$(document).load(function(){
    // ... 代码 ...
})

　一个是ready一个是load,这两个到底有什么区别呢？

　　在面试种，经常会被问到一个问题：ready与load哪一个先执行？答案是：ready先执行，load后执行。

DOM文档加载的步骤：

　　1. 解析HTML结构。

2. 加载外部脚本和样式表文件

　　 3. 解析并执行脚本代码

　　 4. 构造HTML DOM模型。// ready

　　 5. 加载图片等外部文件

　　 6. 页面加载完毕。// load

从上面的描述中，ready在第四步完成之后就执行了，但是load要在第六步完成之后才执行。

结论：

　　ready 是当DOM解析完以后就执行了

　　load 是页面上所有的元素加载完成才会触发，包括页面上的图片等等

　　　在一个高速浏览器的时代，没人愿意等待，我们越早处理DOM越好，我们不需要等待图片资源都加载后才去处理框架的加载。

jQuery是如何处理文档加载的问题：

　　先看一下jQuery源码：

function completed(){
      document.removeEventListner('DOMContentLoaded',completed,false);
     window.removeEventListner('load',completed,false);
     jQuery.ready();
}
jQuery.ready.promise = function(obj){
      if(!readyList){
             readyList = jQuery.Deferred();
             if(document.readyState == "complete"){//webkit引擎，并且webkit版本在525以下
                    setTimeout(jQuery.ready);//这里设置了一个定时器最小时间去执行，主要是保证执行的正确。
             }else{//火狐浏览器 或者 webkit引擎525版本以上（webkit引擎在525以上引入了DOMContentLoaded事件）
                     document.addEventListner('DOMContentLoaded',completed,false);
                     window.addEventListner('load',completed,false)
             }
      }
      return readyList.promise(obj);
}

　　jquery的ready是通过promise给包装过的的，这也是jQuery擅长的手法，统一回调体系。

　　jQuery的具体实现方法：

　　　　1. 如果是webkit引擎，则用document的readyState属性，当值为“complete”或者“loaded”时认为是DOM解析完成

　　　　2. 对webkit引擎还有一个办法是，因为webkit在525以上的版本引入了DOMContentLOaded事件，所以在525版本之上，则可以直接注册DOMContentLoaded事件

　　　　3. 因为DOMContentLoaded时间最早其实是firefox私有事件，而其他浏览才开始引入的，所以对火狐浏览器可以直接使用该事件