- 为什么会有ready函数
- 通常如何判断
- jQuery中如何实现
源码展示:
ready: function( fn ) {
jQuery.bindReady(); //添加监听函数
if ( jQuery.isReady ) { //如果dom加载完成了
fn.call( document, jQuery ); //立刻执行函数
} else if ( readyList ) {
readyList.push( fn ); //否则把函数添加进readyList
}
return this;
}, 2. jQuery.ready() 执行绑定的函数队列
ready: function() {
if ( !jQuery.isReady ) {
if ( !document.body ) {
return setTimeout( jQuery.ready, 13 );
}
jQuery.isReady = true; //设置isReady
if ( readyList ) {
var fn, i = 0;
while ( (fn = readyList[ i++ ]) ) {
fn.call( document, jQuery );
}
readyList = null;
}
if ( jQuery.fn.triggerHandler ) {
jQuery( document ).triggerHandler( "ready" );
}
}
} 3. bindReady() 绑定事件监听器的方法 屏蔽了浏览器的差异看看bindReady的实现
bindReady: function() {
if ( readyBound ) { //默认为false
return;
}
readyBound = true;
if ( document.readyState === "complete" ) {
return jQuery.ready();
}
if ( document.addEventListener ) { document.addEventListener("DOMContentLoaded",DOMContentLoaded, false );
window.addEventListener( "load", jQuery.ready, false );
} else if ( document.attachEvent ) {
document.attachEvent("onreadystatechange", DOMContentLoaded);
window.attachEvent( "onload", jQuery.ready );
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
}
4. doScrollCheck() 为IE浏览器测试的方法
function doScrollCheck() {
if ( jQuery.isReady ) {
return;
}
try {
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( doScrollCheck, 1 );
return;
}
//不停的执行document.documentElement.doScroll("left")
jQuery.ready();
}4. DOMContentLoaded() 移除了绑定的DOMContentLoaded监听器，并且调用jQuery.ready()方法
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
jQuery.ready();
};参考下面文章:http://www.javaeye.com/topic/818329#1767310
评论