jQuery 中ready与load事件

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//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源码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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); }<br>

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

　　jQuery的具体实现方法：

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

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

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