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私有事件，而其他浏览才开始引入的，所以对火狐浏览器可以直接使用该事件

巴特西

jQuery 中ready与load事件

最新文章

热门文章