测试代码：
$('#lk').ready(
function(){
alert($(this).width());
}
);
首先$('#lk')生成jQuery对象并选择对应的DOM，然后ready进入的是
(这里，jQuery.fn.extend扩展的是jQuery对象的方法和属性，而jQuery.extend扩展的是jQuery类的方法和属性。)
jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
};
往下跟踪jQuery.ready.promise()
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
// Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready );
// Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );
// If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", completed );
// If IE and not a frame
// continually check to see if the document is ready
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
// detach all dom ready events
detach();
// and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
readyList一开始是这样定义的
// The deferred used on DOM ready
var readyList;
但这里执行的时候，readyList已经是一个deferred对象了，在哪定义的？
在jQuery.ready.promise的 if ( !readyList )里面添加一个alert('ok')，发现在页面载入的时候是执行到了这里的。故readyList是在初始化JQuery对象的时候初始化的。
readyList = jQuery.Deferred();
这样生成了一个deferred对象，可以参考这篇文章对deferred的理解
jQuery的deferred对象详解
简单来说deferred对象是处理回调函数的一个东西，以后再来分析这个对象。
这里的核心就是如何判断DOM已经加载完成，注意是DOM加载完成而不是所有内容都加载完成(比如图片等)
在jQuery.ready.promise中的三个判断就是解决这个问题：
(1)第一次判断是
if ( document.readyState === "complete" )
这个是IE特有的，如果加载完成了就执行
setTimeout( jQuery.ready );
这个setTimeout其实就是立即执行ready，ready执行的内容是判断isReady然后去执行回调函数。
(2)第二次判断是
if ( document.addEventListener )
判断是不是标准浏览器，若是则用DOMContentLoaded事件，从名字都能知道这个事件是干嘛用的。
(3)第三次判断是
3.1 这里只能查资料了。
如果浏览器存在 document.onreadystatechange 事件，当该事件触发时，
如果 document.readyState=complete 的时候，可视为 DOM 树已经载入。
不过，这个事件不太可靠，比如当页面中存在图片的时候，可能反而在 onload
事件之后才能触发，换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。
3.2 window.attachEvent( "onload", completed );作为一个保险。这样绑定不会重复吗？
当然这些都在completed中处理了，有重复的都被解除绑定了。
3.3
try {
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
}
这段代码很有名
Diego Perini 在 2007 年的时候，报告了一种检测 IE 是否加载完成的方式，使用 doScroll 方法调用。详细的说明见这里。
原理是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。
在本例中每间隔 50 毫秒尝试去执行 doScroll，注意，由于页面没有加载完成的时候，调用 doScroll 会导致异常，所以使用了 try -catch 来捕获异常
到这里就讲完了所有检测DOM加载完成的方法，至于关于回调方面的内容，下回再来研究分析一下。
网友评论