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=" ...
随机推荐
- service 03 iis之服务器无访问权限
这两天在Service 03 的iis 6.0 里面配置一个aspx 的网站 ,总是遇到一个问题 401.2 无权限访问,于是去百度了一下好多的方法,基本上是关于设置匿名用户,打开IUSER用户 ...
- MIME列表
.asx,video/x-ms-asf.xml,text/xml.tsv,text/tab-separated-values.ra,audio/x-pn-realaudio.sv4crc,applic ...
- 有史来最大改变 Android 5.0十大新特性
有史来最大改变 Android 5.0十大新特性 2014.10.16 14:51:31 来源:腾讯数码作者:腾讯数码 ( 0 条评论 ) 距离Android系统上一次重大更新不到一年的时间,谷歌 ...
- JAVA Day9
1.StringBuffer类 优点: 内存的管理! StringBuffer: String 增强版 StringBuffer sb = new StringBuffer(); StringBuff ...
- js实现复制到剪贴板功能,兼容所有浏览器
http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...
- Rotate Image
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- php+mysql+smarty+oop
php+mysql+smarty+oop 设计新闻系统简单的UML模 powerdesigner和diagram designer 设计所需环境.模块.模板样式 数据库uml设计和创建数据库结构 db ...
- osgAnimation例子的注释的注释
osgAnimation例子的注释的注释 转自:http://www.cnblogs.com/sunliming/archive/2011/12/12/2284995.html #include &l ...
- Ubuntu14.04下解压rar压缩包
下载安装rarlinux安装 rarlinux官方网站下载地址:http://www.rarsoft.com/download.htm 安装(以我下载的rarlinux-x64-5.1.1.tar.g ...
- TEST===>Sqlserver中获取年月日时分秒
可以用两种方法获取 1. select GETDATE() as '当前日期', DateName(year,GetDate()) as '年', DateName(month,GetDate()) ...