ready事件是当DOM文档树加载完成后执行一个函数(不包含图片,css等),因此它的触发要早于load事件。用法:

  • $(document).ready(fun)    ;fun是一个函数,这样当DOM树加载完毕后就会执行该匿名函数了

ready有一个简写,可以直接传入$(fun)即可,这是因为在jQuey内部也定义了一个$(document)的jQuery对象,和我们在上面的写法是一样的

ready事件和window的onload区别:

  • ready事件  ;等dom树载完毕后就可以执行
  • onload事件   ;等网页中所有的资源加载完毕后(包括图片,flash,音频,视频)才能执行   

onload事件还可以绑定在某个图片上面,举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.cnblogs.com/images/logo_small.gif" alt="">
<script>
$(()=>console.log('DOM树已加载完毕')) //ready事件
$('img').on('load',()=>console.log('图片已加载完毕')) //图片的加载事件
$(window).on('load',()=>console.log('资源已加载完毕')) //网页所有资源都加载完毕后的事件
</script>
</body>
</html>

这里我们用了箭头函数来写,代码很简单了,我们在绑定了一个ready事件,一个图片上的onload事件和window上的onload事件,加载后输出如下:

可以看到首先是ready事件的触发,然后是图片的onload事件,最后是window的onload事件的触发,此时所有资源都已经加载完了

源码分析


jquery的ready事件就是在document上绑定了一个DOMContentLoaded事件对象,对他进行了一下封装,DOMContentLoaded事件的原理可以看看看这篇文章,介绍得挺详细的:https://www.cnblogs.com/caizhenbo/p/6679478.html

jQuery的ready事件是基于函数列表实现的,函数列表可以看这个连接:https://www.cnblogs.com/greatdesert/p/11433365.html

当我们调用$(fun)去执行一个ready事件的时候首先会执行入口模块里的逻辑,与ready相关的如下:

init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined)
if ( !selector ) {
return this;
} // Handle $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
} // The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
} // Handle HTML strings
if ( typeof selector === "string" ) {
/*略*/
} else if ( jQuery.isFunction( selector ) ) { //如果参数selector是函数,则认为是绑定ready事件
return rootjQuery.ready( selector ); //则执行rootjQuery.ready()方法,并把selector作为参数传入
} /*略*/
},

rootjQuery是jQuery内部定义的一个局部变量,是一个jQuery实例,如下:

rootjQuery = jQuery(document);                       //第917行,保存了document对象引用的jQuery实例

在入口模块引用rootjQuery.ready()也就是执行了rootjQuery实例对象上的ready方法(该方法是定义在原型上的),如下:

jQuery.fn = jQuery.prototype = {
ready: function( fn ) {
// Attach the listeners
jQuery.bindReady(); //先执行jQuery.bindReady()绑定ready事件(实际上绑定的是DOMContentLoaded或onreadystatechange事件) // Add the callback
readyList.add( fn ); //为函数列表readyList增加一个函数 return this;
}
}

jQuery.bindReady()是一个静态方法,用于绑定事件的,内部会初始化readyList为一个jQuery.Callbacks( "once memory" )函数列表对象

然后执行readyList.add( fn )将fn函数保存到函数列表readyList里面。

jQuery.bindReady()的实现如下:

jQuery.extend({
bindReady: function() { //初始化ready事件监听函数列表readyList,并为document对象绑定ready事件主监听函数DOMContentLoaded
if ( readyList ) {
return;
} readyList = jQuery.Callbacks( "once memory" ); //调用jQuery.Callbacks(flags)ready事件监听函数列表readylist,同时传入once和memory标记。 // Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) { //如果文档已经就绪,则调用jQuery.ready(wait)执行ready事件监听函数列表readyList
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout( jQuery.ready, 1 ); //通过setTimeout()异步执行方法jQuery.ready(wait),以允许其他脚本延迟ready事件的触发。
} // Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) { //在IE9+及以上浏览器绑定DOMContentLoaded事件
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); //把监听函数DOMContentLoaded绑定到document对象的DOMContentLoaded事件上 // A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready ); // If IE and not a frame
// continually check to see if the document is ready
var toplevel = false; try {
toplevel = window.frameElement == null;
} catch(e) {} if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
},
/*略*/
})

这里我们调用document.addEventListener在document上绑定了一个DOMContentLoaded事件,这样当DOM树加载完后就会执行DOMContentLoaded函数了,DOMContentLoaded函数的定义如下:

if ( document.addEventListener ) {         //如果是IE9+和其他浏览器
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); //先移除document的DOMContentLoaded事件
jQuery.ready(); //再调用jQuery.ready()执行ready事件监听函数
}; } else if ( document.attachEvent ) {
DOMContentLoaded = function() {
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", DOMContentLoaded );
jQuery.ready();
}
};
}

函数内首先会移除DOMContentLoaded事件,然后调用jQuery.ready()事件,这是DOM树触发后的事件了(我们在jQuery.fn.ready()内执行了readyList.add( fn )增加的函数都会依次触发),如下:

jQuery.extend({
isReady: false,
ready: function( wait ) { //实际执行的函数 触发ready事件监听函数列表readyList和数据缓存对象中的ready事件监听函数。
// Either a released hold or an DOMready/load event and not yet ready
if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) { //如果wait是true且jQuery.readyWait等于0 或者 wait不是true且jQuery.isReady是false 则执行 初始化jQuery.isReady为false的
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if ( !document.body ) {
return setTimeout( jQuery.ready, 1 );
} // Remember that the DOM is ready
jQuery.isReady = true; //设置jQuery.inReady为true,表示ready事件已就绪。 // If a normal DOM Ready event fired, decrement, and wait if need be
if ( wait !== true && --jQuery.readyWait > 0 ) {
return;
} // If there are functions bound, to execute
readyList.fireWith( document, [ jQuery ] ); //执行ready事件监听函数readyList,上下文是document(即关键词this),[jQuery]是ready事件监听函数的参数。 // Trigger any bound ready events
if ( jQuery.fn.trigger ) {
jQuery( document ).trigger( "ready" ).off( "ready" );
}
}
},
/*略*/
})

writer by:大沙漠 QQ:22969969

最后调用readyList.fireWith()方法去触发回掉函数列表里的每个函数。

jQuery 源码分析(十八) ready事件详解的更多相关文章

  1. jQuery 源码分析(十一) 队列模块 Queue详解

    队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...

  2. mybatis 源码分析(八)ResultSetHandler 详解

    本篇博客就是 myabtis 系列的最后一篇了,还剩 ResultSetHandler 没有分析:作为整个 mybatis 最复杂最繁琐的部分,我不打算按步骤一次详解,因为里面的主要内容就是围绕 re ...

  3. netty源码分析(十八)Netty底层架构系统总结与应用实践

    一个EventLoopGroup当中会包含一个或多个EventLoop. 一个EventLoop在它的整个生命周期当中都只会与唯一一个Thread进行绑定. 所有由EventLoop所处理的各种I/O ...

  4. jQuery 源码分析(十六) 事件系统模块 底层方法 详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...

  5. jQuery 源码分析(十) 数据缓存模块 data详解

    jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...

  6. jQuery 源码分析(十二) 数据操作模块 html特性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第1个部分:HTML特性部分,html特性部分是对原生方法getAttribute()和setAttribute()的封装,用于修改DOM元素的特性 ...

  7. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

  8. jQuery 源码分析(十五) 数据操作模块 val详解

    jQuery的属性操作模块总共有4个部分,本篇说一下最后一个部分:val值的操作,也是属性操作里最简单的吧,只有一个API,如下: val(vlaue)        ;获取匹配元素集合中第一个元素的 ...

  9. jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...

随机推荐

  1. 菜鸟刷面试题(三、Redis篇)

    目录: redis是什么?都有哪些使用场景? redis有哪些功能? redis和memecache有什么区别? redis为什么是单线程的? 什么是缓存穿透?怎么解决? redis支持的数据类型有哪 ...

  2. jenkins 分布式配置+allure集成+邮件发送

    jenkins节点配置+allure集成+邮件发送这一套走下来感觉很麻烦,要配置的东西太多了,所以在此记录一下,防止以后忘了. 环境: 主机master:腾讯云服务器ubuntu18.04 执行机sl ...

  3. pycharm添加快捷键:

  4. JSON对象转JAVA对象--com.alibaba.fastjson.JSONObject

    打印结果:

  5. Googleplaystore数据分析

    本次所用到的数据分析工具:numpy.pandas.matplotlib.seaborn 一.分析目的 假如接下来需要开发一款APP,想了解开发什么类型的APP会更受欢迎,此次分析可以对下一步计划进行 ...

  6. 利用百度文字识别API识别图像中的文字

      本文将会介绍如何使用百度AI开放平台中的文字识别服务来识别图片中的文字.百度AI开放平台的访问网址为:http://ai.baidu.com/ ,为了能够使用该平台提供的AI服务,你需要事先注册一 ...

  7. mysql给字段取别名无法被jdbc解析的解决办法

    项目上用的Spring JDBC,是通过ResultSetMetaData接口来调用具体数据库的JDBC实现类来获取数据库返回结果集的. 在项目开发中,发现在MySQL中使用的别名没有办法被正常解析, ...

  8. #w30 2019年大前端技术周刊

    本周是2019年第30周 会议 2019年ArchSummit全球架构师峰会 2019年7月在深圳举行了ArchSummit全球架构师峰会,里面有不少关于大前端的主题可以关注. 从0到1,移动政务应用 ...

  9. Inherit from the Business Class Library Class 继承自Business类(EF)

    In this lesson, you will learn how to implement business classes for your application using the Busi ...

  10. 通过Android反编译技术研究国内陌生人社交即时通讯的技术方案

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/100 即时通讯IM类App分析 这两周对国内陌生人社交领域 ...