jquery ready 原理
来源:互联网 发布:office wps 知乎 编辑:程序博客网 时间:2024/05/29 10:11
转 http://www.cnblogs.com/fullhouse/archive/2012/03/07/2384016.html
jQuery是一套跨浏览器的JavaScript函式库,强化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上释出第一个版本。目前全球有28%的站台使用jQuery,是目前最受欢迎的JavaScript函式库。
$(document).ready(function (){ alert('use in page script tag') });
$(document).ready(function (){ alert('use in import js file') });
现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:
代码如下:
ready: function(fn) {
// 绑定监听器
bindReady();
// 如果 DOM 加载完成
if ( jQuery.isReady )
// 马上运行此函数
fn.call( document, jQuery );
// 否则保存起来
else
// 把函数加入缓存数组中
jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
return this;
}
代码如下:
var readyBound = false;
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
if ( document.addEventListener && !jQuery.browser.opera)
// 直接使用事件回调即可
document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
// 如果是ie并且不是嵌在frame中
// 就需要不断地检查文档是否加载完
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
// 这个地方标记一下,在后面解析(1)
document.documentElement.doScroll("left");
} catch( error ) {
//// 这个地方标记一下,在后面解析(2)
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i < document.styleSheets.length; i++) // 标记(3)
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
}, false);
if ( jQuery.browser.safari ) {
var numStyles;
(function(){
if (jQuery.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) { // 标记(4)
setTimeout( arguments.callee, 0 );
return;
}
if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) { // 标记(5)
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready ); // 标记(6)
}
}
(2):setTimeout( arguments.callee, 0 )这句是表示延迟0秒调用,实际上它不会马上就调用,而是会尽可能快地调用,它告诉浏览器为当前任何挂起的事件运行完事件句柄并且完成了文档当前状态的更新后才调用. Arguments.callee即是外层的匿名函数,参数的调用者
(3):这个地方你也许觉得奇怪,为什么不在mozilla那里一起处理呢? 原因就是opera的DOMContentLoaded事件发生后,其css样式是还没完全可用的,所以要特殊处理,就是判断每个css的tag都是不是enable了.
(4),(5):safari中document.readyState的状态为loaded或complete时,css文件引入还未能确定是不是解析完了的,所以要通过判断其css文件数目
(6):最后,如果上面的hack都不支持的话…就用最保险的load事件,保证能执行到初始化代码.
转 http://www.jb51.net/article/23927.htm
jquery ready()的几种实现方法小结
1.最常用也是最标准的
$(document).ready(){
});
2.是上面的简写:
$(function(){
})
很奇怪?为什么能这样?不是判断document对象是否 reADy然后才执行函数的么?document哪去了?我们看下jQuery的源代码:
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
找到了,我们再看下$这个方法的参数
$(selector,context)
第一个为选择器,第二个是容器
如果不填就默认为document
3.好吧!我承认这个方式是来打酱油的
});
4.
alert($("#ready1").html());
});
第四种方式和第三种没有区别啊?各位客官仔细看!我们给functIOn传了一个参数$
第四种方式一般用在处理jQuery的$和别的库冲突的时候用的,通过jQuery.noConflict()这个方法,我们就可以直接在代码中通过jQuery来代替$来使用,但又习惯了使用$怎么办?看下面的代码:
jQuery(function($){
alert($("#ready1").html()); //我们又能用上$符号了
});
上面是目前本人知道的几种jQuery的ready ()的写法.如果还有其他的写法,望告知
- jquery ready 原理
- jQuery ready方法原理
- jQuery ready函数实现原理
- jQuery ready函数实现原理
- jQuery ready函数实现原理
- jQuery ready函数实现原理
- jQuery ready函数实现原理
- jquery ready方法实现原理 内部原理
- jQuery慎用$(document).ready
- jQuery $(document).ready()介绍
- Jquery ready function Tester.
- jQuery之ready实现
- jQuery 事件 - ready() 方法
- ready method for jQuery
- jquery经典的.ready
- jQuery(document).ready(function(){});
- jQuery之ready
- Jquery document.ready()
- 数的长度
- Linux DM9000网卡驱动程序完全分析
- Hadoop生态系统学习路线
- java语法---mkdir()和mkdirs()
- Android基于XMPP Smack Openfire下学习开发IM(五)连接断开重连
- jquery ready 原理
- android java内存
- vs2010编译错误:error MSB3073: :VCEnd" exited with code 1.
- wordpress中的.htaccess不知不觉的还原成默认
- Node.js 与Nginx比较
- 数据结构——算法之(032)(求两个串中的第一个最长子串)
- spring jar包详解
- douban一刻用到的开源代码
- 从VC工程的rc资源中将资源文件取出来或读出来