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=" ...
随机推荐
- Timer计时器
private Timer timer; timer.schedule(new TimerTask() { @Override public void run() { if (isStopedReco ...
- linux学习笔记-前篇
大学毕业已经快三年了,从事嵌入式开发的工作也快三年了. 不过,老干些裸机开发,感觉很是枯燥,一咬牙一跺脚,决定从今天开始学习Linux操作系统,顺便记录下学习过程中所遇到的问题与心得. 自己从前完全没 ...
- pandas 学习(1): pandas 数据结构之Series
1. Series Series 是一个类数组的数据结构,同时带有标签(lable)或者说索引(index). 1.1 下边生成一个最简单的Series对象,因为没有给Series指定索引,所以此时会 ...
- GridView点击行触发SelectedIndexChanged事件
1.在<% @Page ...... %>指令中添加 EnableEventValidation="false" 2.在RowDataBound事件中添加 protec ...
- NSMutableAttributedString常用代码
NSTextAttachment *attachment = [[NSTextAttachment alloc] init]; attachment.image = [UIImage imageNam ...
- 【Telerik】<telerik:RadGridView/>控件的使用
学习Telerik第三方控件中的WPF时,对于RadGridView控件做的一些记录. AutoGenerateColumns:启动时是否生成列 ShowGroupPanel:是否显示表格的分组名称 ...
- Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3318/UITableView.m:10772
Assertion failure in -[UITableView _classicHeightForRowAtIndexPath:], /SourceCache/UIKit_Sim/UIKit-3 ...
- ZK textbox Constraint验证
test.zul: <?page title="" contentType="text/html;charset=UTF-8"?> <zk x ...
- C# 方法返回值的个数
方法返回值类型总的来说分为值类型,引用类型,Void 有些方法显示的标出返回值 public int Add(int a,int b) { return a+b; } 有些方法隐式的返回返回值,我们可 ...
- json字符串转泛型集合对象
Dictionary<string, object> jd = js.Deserialize<Dictionary<string, object>>(item); ...