window.onload 应该都知道了,不过此事件要在DOM完全加载完毕,包括图片都加载完毕才触发,如果我们有事情需要注册到onload上,有时恐怕得等到黄瓜菜都凉了。于是这时 DOMContentLoaded 翩翩而来,此事件在 DOM 加载完毕(不包括图片都加载完毕)后触发,正合要求,但很不幸的是此事件IE不支持。下面来看看JQuery的如何解决这个问题,废话不说,直接看代码
那么看看这个 bindReady 方法
最后看看 doScrollCheck 方法是何方神圣。
ready: function( fn ) {
// 绑定监听
jQuery.bindReady();
// 如果 DOM 加载完毕
if ( jQuery.isReady ) {
// 立即执行方法
fn.call( document, jQuery );
// 否则,将需要执行的方法保存起来
} else if ( readyList) {
// 保存方法到 list 中
readyList.push( fn );
}
return this;
}
那么看看这个 bindReady 方法
bindReady: function() {
// 设置是否已经绑定的标识符
if ( readyBound ) {
return;
}
readyBound = true;
// 如果文档加载完毕,执行注册保存的方法
if ( document.readyState === "complete" ) {
return jQuery.ready();
}
// Mozilla, Opera 和 webkit nightly 之流的浏览器支持 DOMContentLoaded 事件
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// 如果注册 DOMContentLoaded 事件句柄失败,注册到 window 的 onload 上作为后手
window.addEventListener( "load", jQuery.ready, false );
// 如果是传说中万恶的 IE
} else if ( document.attachEvent ) {
// 如果是 iframe, 绑定到 onreadystatechange, 会在 window.onload 前触发
document.attachEvent("onreadystatechange", DOMContentLoaded);
// 同样注册到 onload 上作为后手
window.attachEvent( "onload", jQuery.ready );
// 如果不是一个 iframe,检查 DOM 是否加载完毕
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
// 在此方法中检查 DOM 是否加载完毕
doScrollCheck();
}
}
}
最后看看 doScrollCheck 方法是何方神圣。
// 检查 DOM 是否加载完成,与 DOMContentLoaded 事件类似
function doScrollCheck() {
// 再次判断一下
if ( jQuery.isReady ) {
return;
}
try {
// 如果是IE,使用 Diego Perini 的一个 hack 技术,原理是执行 doScroll方法,如果可执行说明 DOM 加载完毕
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
// 如果未加载完毕,轮询之
setTimeout( doScrollCheck, 1 );
return;
}
// 执行注册保存的方法
jQuery.ready();
}