在Jquery里面,我們可以看到兩種寫(xiě)法:$(function(){}) 和$(document).ready(function(){})
這兩個(gè)方法的效果都是一樣的,都是在dom文檔樹(shù)加載完之后執(zhí)行一個(gè)函數(shù)(注意,這里面的文檔樹(shù)加載完不代表全部文件加載完)。
而window.onload是在dom文檔樹(shù)加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)。也就是說(shuō)$(document).ready要比window.onload先執(zhí)行。
那么Jquery里面$(document).ready函數(shù)的內(nèi)部是怎么實(shí)現(xiàn)的呢?下面我們就來(lái)看看:
我們來(lái)為document添加一個(gè)ready函數(shù):
document.ready =function(callback) {///兼容FF,Googleif(document.addEventListener) {
document.addEventListener('DOMContentLoaded',function() {
document.removeEventListener('DOMContentLoaded', arguments.callee,false);
callback();
},false)
}//兼容IEelseif(document.attachEvent) {
document.attachEvent('onreadystatechange',function() {if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}? ? ? ? ? ? ? ? })? ? ? ? ? ? }elseif(document.lastChild ==document.body) {
callback();
}
document.ready這個(gè)函數(shù)是實(shí)現(xiàn)了。我們?cè)賮?lái)驗(yàn)證一下最上面所說(shuō)的“ready要比onload先執(zhí)行”
window.onload =function() {
alert('onload');
};
document.ready(function() {
alert('ready');
});
執(zhí)行這段代碼之后,你會(huì)看到瀏覽器里面會(huì)先彈出“ready”,在彈出onload。