JQuery1.4.2的ondomready分析

window.onload 应该都知道了,不过此事件要在DOM完全加载完毕,包括图片都加载完毕才触发,如果我们有事情需要注册到onload上,有时恐怕得等到黄瓜菜都凉了。于是这时 DOMContentLoaded 翩翩而来,此事件在 DOM 加载完毕(不包括图片都加载完毕)后触发,正合要求,但很不幸的是此事件IE不支持。下面来看看JQuery的如何解决这个问题,废话不说,直接看代码

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();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值