jQuery初始化加载的实现
与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初始化加载的实现的更多相关文章
- js、jquery初始化加载顺序
// ready 这个方法只是在页面所有的DOM加载完毕后就会触发 // 方式1 $(function(){ // do something }); // 方式2 $(document).ready( ...
- jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- js和jquery页面初始化加载函数的方法及先后顺序
运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...
- (转载) jQuery 页面加载初始化的方法有3种
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- (转,记录用)jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- jQuery 页面加载初始化
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- (转载) jQuery页面加载初始化的3种方法
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...
- js jquery 页面初始化加载
一.js 页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> <script type=" ...
随机推荐
- 【zz】面试题之寻找丢失的数字
据传说是MS/Google等等IT名企业的面试题: 有一组数字,从1到n,中减少了一个数,顺序也被打乱,放在一个n-1的数组里 请找出丢失的数字,最好能有程序,最好算法比较快 BTW1: 有很多种方法 ...
- 在SQL SERVER中实现RSA加解密函数(第二版)
/*************************************************** 作者:herowang(让你望见影子的墙) 日期:2010.1.5 注: 转载请保留此信息 更 ...
- Java基础知识点1:基本类型包装类
基本类型的包装类 简介 通常来说我们在程序中经常会使用元类型,比如 int data = 1; float data = 2.1F; 但是在有些场景中不能直接使用元类型,比如如果我们想要建立一个int ...
- linux shell 常用指令
1. man 对你熟悉或不熟悉的命令提供帮助解释 eg:man ls 就可以查看ls相关的用法 注:按q键或者ctrl+c退出,在linux下可以使用ctrl+c终止当前程序运行. 2. ls 查看目 ...
- win10休眠选项在哪里设置?如何设置?
本人以前安装的Win7也是碰到这个问题 http://www.jb51.net/os/win10/373383.html 查询.打开休眠命令 1.右键开始菜单,选择命令提示符(管理员) 或 win+R ...
- keyCode,charCode,which
1.触发顺序keydown keypress keyup,但keypress事件只有输入相关按键才会触发,功能按键不会触发keypress事件(keypress事件有个额外的charCode属性) 2 ...
- iOS GCD学习笔记
// 后台执行: dispatch_async(dispatch_get_global_queue(, ), ^{ // something }); // 主线程执行: dispatch_async( ...
- Slate中绑定动态数据
https://answers.unrealengine.com/questions/232322/slate-blurred-border-shadow.html
- Linux下搭建个人网站
前不久在阿里买了一个服务器,然后开始第一次尝试搭建自己的个人网站.前端采用了bootstrap框架,后端采用的是PHP,数据库使用的是Mysql.新手第一次在linux下搭建遇见很多问题,在这里分享一 ...
- linux shell trap的使用
原文地址:http://blog.sina.com.cn/s/blog_62eb16bb01014dbh.html 一. trap捕捉到信号之后,可以有三种反应方式: (1)执行一段程序来处理这一信号 ...