您的位置：首页 > Web前端 > JQuery

提取jQuery的ready方法

2010-06-07 16:05 537 查看

这次的onDOMReady更有吸引力了

先说明一下，为什么要提取jQuery的ready方法？

因为在很多时候大家做前端时，需要在DOM树载入时马上执行一些函数，比如对导航条进行初始化。
但又不愿意仅为了这一个需求而引入整个jQuery库，于是就把jQuery的ready方法提取出来，单独使用了。

另外你也可以在构建自己的js框架时使用此函数。

重复一遍，我们的口号是什么？
彪悍的应用，没有一行代码是多余的！！！

ready-from-jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>提取自jQuery的ready方法</title>

<script type="text/javascript">

(function () {
var isReady = false; //判断onDOMReady方法是否已经被执行过
var readyList = []; //把需要执行的方法先暂存在这个数组里
var timer; //定时器句柄
ready = function (fn) {
if (isReady)
fn.call(document);
else
readyList.push(function () { return fn.call(this); });
return this;
}
var onDOMReady = function () {
for (var i = 0; i < readyList.length; i++) {
readyList[i].apply(document);
}
readyList = null;
}
var bindReady = function (evt) {
if (isReady) return;
isReady = true;
onDOMReady.call(window);
if (document.removeEventListener) {
document.removeEventListener("DOMContentLoaded", bindReady, false);
} else if (document.attachEvent) {
document.detachEvent("onreadystatechange", bindReady);
if (window == window.top) {
clearInterval(timer);
timer = null;
}
}
};

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", bindReady, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function () {
if ((/loaded|complete/).test(document.readyState))
bindReady();
});
if (window == window.top) {
timer = setInterval(function () {
try {
isReady || document.documentElement.doScroll('left'); //在IE下用能否执行doScroll判断dom是否加载完毕
} catch (e) {
return;
}
bindReady();
}, 5);
}
}
})();

//使用方法
ready(navInit); //navInit为已存在的函数

//或
ready(function () {
navInit();
});

function navInit() {
document.getElementById("info").innerHTML = "document.getElementById(“info”).innerHTML = ok";
}

</script>
</head>
<body>

<div id="info"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航