与jQuery事件模块的其他事件不同,其他事件是通过数据缓存实现的,而初始化事件,jQuery.ready则是通过回调函数列表实现的。$()的参数如果是函数就向回调函数列表中添加回调函数,同时为DOMContentLoaded注册事件,在注册的事件处理函数中,触发resolve事件。

以下是对jQuery源代码中的ready事件进行了简化的代码。具体如下:

1.定义了jQuery.ready.promise.功能及代码实现如下:

    //jQuer的DOM页面加载通过回调函数列表完成
//下面的函数:1)初始化一个回调函数列表
//2)向DomContentLoaded注册监听事件
jQuery.ready.promise=function(obj){
if(!readyList){
readyList=jQuery.Defered();
document.addEventListener('DOMContentLoaded',compeleted,false);
}
return readyList.promise(obj);
};

2.向document的DOMContentLoaded注册的监听函数compeleted代码如下:

        compeleted=function(){
document.removeEventListener('DOMContentListener',compeleted,false);
jQuery.ready();
};

3.上述代码中的jQuery.ready()实际上完成了回调函数列表的触发操作,具体如下:

jQuery.extend({   

    // Handle when the DOM is ready
ready: function( wait ) { // If there are functions bound, to execute
readyList.resolveWith( document, [ jQuery ] ); // Trigger any bound ready events
// if ( jQuery.fn.trigger ) {
// jQuery( document ).trigger("ready").off("ready");
// }
},
});

4.在初始化函数中,为回调函数列表添加加载成功的触发函数,如下所示:(实际上源代码调用了.ready方法,不过实际上就是封装了以下代码)

jQuery.fn.extend({
init: function( selector, context, rootjQuery ) { // Handle HTML strings
if ( typeof selector === "string" ) { } else if ( jQuery.isFunction( selector ) ) {
jQuery.ready.promise().done(selector);
       return this;
}
},

如此就能够保证,当页面加载完成时间DOMContentLoaded事件触发的时候,回调函数能够依次执行。

jQuery初始化加载的实现的更多相关文章

  1. js、jquery初始化加载顺序

    // ready 这个方法只是在页面所有的DOM加载完毕后就会触发 // 方式1 $(function(){ // do something }); // 方式2 $(document).ready( ...

  2. jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  3. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  4. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  5. (转载) jQuery 页面加载初始化的方法有3种

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  6. (转,记录用)jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  7. jQuery 页面加载初始化

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  8. (转载) jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  9. js jquery 页面初始化加载

    一.js 页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> <script type=" ...

随机推荐

  1. html标准

    html1.使用双引号2. <img src=""> 不添加/3. <html lang="zh-CN">4. <a class= ...

  2. QuickTest Professionar 快捷键

    新建Test – New Test CTRL + N录制 – Record F3打开Test – Open Test CTRL + O新建业务组件 – Business Component > ...

  3. 所有的畅通工程[HDU1232][HDU1874][HDU1875][HDU1879]

    畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissio ...

  4. an excellent capability of C# language and compiler

    Sometimes you want to write code that works for different primitive types, and as C# doesn't support ...

  5. BZOJ4562: [Haoi2016]食物链

    Description 如图所示为某生态系统的食物网示意图,据图回答第1小题 现在给你n个物种和m条能量流动关系,求其中的食物链条数. 物种的名称为从1到n编号 M条能量流动关系形如 a1 b1 a2 ...

  6. CF #376 (Div. 2) C. dfs

    1.CF #376 (Div. 2)    C. Socks       dfs 2.题意:给袜子上色,使n天左右脚袜子都同样颜色. 3.总结:一开始用链表存图,一直TLE test 6 (1)如果需 ...

  7. .net core 关键概念

    startup       startup asp.net core 的入口,在构造函数中完成环境参数的配置. 其中Configure 方法是用来控制如何respond一个http请求的, 例如配置l ...

  8. Java_ClassLoader内存溢出-从tomcat的reload说起

    原文链接:http://nius.me/classloader-memory-leak/ 对于j2ee项目,一直使用eclipse的wtp,每次修改代码后,可以自动热部署.简单的项目wtp似乎没什么问 ...

  9. oracle 取小数位数

    select ltrim('124532.62879'-floor('124532.62879'),'0.') from dual;select length(66695) from dual; 这两 ...

  10. 制作IOS企业版App网页扫描二维码下载安装

    有时候我们需要在XX网站的主页上去扫描二维码下载,那么ios开发中如何做到这一点呢. 我给大家解答一下,这也是在最近工作中用到的部分,在网上了解了一些. 下面给大家分解一下步骤: 1.Plist 和 ...