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

上一篇:SqlServer Change Data Capture(CDC)数据变更捕获


下一篇:jquery中mouseout和mouseleave 事件的区别