jquery ready函數(shù)源代碼研究
更新時(shí)間:2009年12月06日 00:57:12 作者:
我們都知道,很多時(shí)候,在頁面加載完后都需要做一些相應(yīng)的初始化動作.例如,運(yùn)行某些js特效,設(shè)置表單等等.怎么知道頁面加載完了呢?
一般情況下都是設(shè)置body標(biāo)簽的onload監(jiān)聽window的load事件.但load事件是要在頁面的元素全部加載完了才觸發(fā)的,如果頁面上圖片較多或圖片太大,就會導(dǎo)致初始化的代碼未被執(zhí)行的時(shí)候用戶就做了其它操作了. Jquery庫提供了一個(gè)非常方便好用的函數(shù)( $(selector).ready()),讓我們可以在頁面的dom加載完后就可以做相應(yīng)的操作(當(dāng)然,這還得看用戶瀏覽器的支持).,而不用等待全部元素加載完成.例如:
$(document).ready(function (){ alert('use in page script tag') });
$(document).ready(function (){ alert('use in import js file') });
現(xiàn)在讓我們來研究一下這個(gè)函數(shù)的實(shí)現(xiàn).
原理:
在jquery腳本加載的時(shí)候,會設(shè)置一個(gè)isReady的標(biāo)記,監(jiān)聽DOMContentLoaded事件(這個(gè)不是什么瀏覽器都有的,不同瀏覽器,jquery運(yùn)作方式不一樣).當(dāng)然遇到調(diào)用ready函數(shù)的時(shí)候,如果isReady未被設(shè)置,那就是說頁面未加載完,就會把要執(zhí)行的函數(shù)用一個(gè)數(shù)組緩存起來,當(dāng)頁面加載完后,再把緩存的函數(shù)一一執(zhí)行.
Jquery中的詳細(xì)代碼分析:
ready: function(fn) {
// 綁定監(jiān)聽器
bindReady();
// 如果 DOM 加載完成
if ( jQuery.isReady )
// 馬上運(yùn)行此函數(shù)
fn.call( document, jQuery );
// 否則保存起來
else
// 把函數(shù)加入緩存數(shù)組中
jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
return this;
}
讓我們看看jquery如果實(shí)現(xiàn)不同瀏覽器dom加載完成的通知 bindReady()函數(shù):
var readyBound = false;
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
if ( document.addEventListener && !jQuery.browser.opera)
// 直接使用事件回調(diào)即可
document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
// 如果是ie并且不是嵌在frame中
// 就需要不斷地檢查文檔是否加載完
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
// 這個(gè)地方標(biāo)記一下,在后面解析(1)
document.documentElement.doScroll("left");
} catch( error ) {
//// 這個(gè)地方標(biāo)記一下,在后面解析(2)
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i < document.styleSheets.length; i++) // 標(biāo)記(3)
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
}, false);
if ( jQuery.browser.safari ) {
var numStyles;
(function(){
if (jQuery.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) { // 標(biāo)記(4)
setTimeout( arguments.callee, 0 );
return;
}
if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) { // 標(biāo)記(5)
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready ); // 標(biāo)記(6)
}
}
(1):這個(gè)主要是測出ie下的dom ready,原理在這里http://javascript.nwbox.com/IEContentLoaded/,利用在ie下.當(dāng)dom未完成解析時(shí),調(diào)用document的document.documentElement.doScroll(”left”)會出錯(cuò)這個(gè)小技巧便可得知dom有沒有ready了.
(2):setTimeout( arguments.callee, 0 )這句是表示延遲0秒調(diào)用,實(shí)際上它不會馬上就調(diào)用,而是會盡可能快地調(diào)用,它告訴瀏覽器為當(dāng)前任何掛起的事件運(yùn)行完事件句柄并且完成了文檔當(dāng)前狀態(tài)的更新后才調(diào)用. Arguments.callee即是外層的匿名函數(shù),參數(shù)的調(diào)用者
(3):這個(gè)地方你也許覺得奇怪,為什么不在mozilla那里一起處理呢? 原因就是opera的DOMContentLoaded事件發(fā)生后,其css樣式是還沒完全可用的,所以要特殊處理,就是判斷每個(gè)css的tag都是不是enable了.
(4),(5):safari中document.readyState的狀態(tài)為loaded或complete時(shí),css文件引入還未能確定是不是解析完了的,所以要通過判斷其css文件數(shù)目
(6):最后,如果上面的hack都不支持的話…就用最保險(xiǎn)的load事件,保證能執(zhí)行到初始化代碼.
$(document).ready(function (){ alert('use in page script tag') });
$(document).ready(function (){ alert('use in import js file') });
現(xiàn)在讓我們來研究一下這個(gè)函數(shù)的實(shí)現(xiàn).
原理:
在jquery腳本加載的時(shí)候,會設(shè)置一個(gè)isReady的標(biāo)記,監(jiān)聽DOMContentLoaded事件(這個(gè)不是什么瀏覽器都有的,不同瀏覽器,jquery運(yùn)作方式不一樣).當(dāng)然遇到調(diào)用ready函數(shù)的時(shí)候,如果isReady未被設(shè)置,那就是說頁面未加載完,就會把要執(zhí)行的函數(shù)用一個(gè)數(shù)組緩存起來,當(dāng)頁面加載完后,再把緩存的函數(shù)一一執(zhí)行.
Jquery中的詳細(xì)代碼分析:
復(fù)制代碼 代碼如下:
ready: function(fn) {
// 綁定監(jiān)聽器
bindReady();
// 如果 DOM 加載完成
if ( jQuery.isReady )
// 馬上運(yùn)行此函數(shù)
fn.call( document, jQuery );
// 否則保存起來
else
// 把函數(shù)加入緩存數(shù)組中
jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
return this;
}
讓我們看看jquery如果實(shí)現(xiàn)不同瀏覽器dom加載完成的通知 bindReady()函數(shù):
復(fù)制代碼 代碼如下:
var readyBound = false;
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
if ( document.addEventListener && !jQuery.browser.opera)
// 直接使用事件回調(diào)即可
document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
// 如果是ie并且不是嵌在frame中
// 就需要不斷地檢查文檔是否加載完
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
// 這個(gè)地方標(biāo)記一下,在后面解析(1)
document.documentElement.doScroll("left");
} catch( error ) {
//// 這個(gè)地方標(biāo)記一下,在后面解析(2)
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i < document.styleSheets.length; i++) // 標(biāo)記(3)
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
}, false);
if ( jQuery.browser.safari ) {
var numStyles;
(function(){
if (jQuery.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) { // 標(biāo)記(4)
setTimeout( arguments.callee, 0 );
return;
}
if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) { // 標(biāo)記(5)
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready ); // 標(biāo)記(6)
}
}
(1):這個(gè)主要是測出ie下的dom ready,原理在這里http://javascript.nwbox.com/IEContentLoaded/,利用在ie下.當(dāng)dom未完成解析時(shí),調(diào)用document的document.documentElement.doScroll(”left”)會出錯(cuò)這個(gè)小技巧便可得知dom有沒有ready了.
(2):setTimeout( arguments.callee, 0 )這句是表示延遲0秒調(diào)用,實(shí)際上它不會馬上就調(diào)用,而是會盡可能快地調(diào)用,它告訴瀏覽器為當(dāng)前任何掛起的事件運(yùn)行完事件句柄并且完成了文檔當(dāng)前狀態(tài)的更新后才調(diào)用. Arguments.callee即是外層的匿名函數(shù),參數(shù)的調(diào)用者
(3):這個(gè)地方你也許覺得奇怪,為什么不在mozilla那里一起處理呢? 原因就是opera的DOMContentLoaded事件發(fā)生后,其css樣式是還沒完全可用的,所以要特殊處理,就是判斷每個(gè)css的tag都是不是enable了.
(4),(5):safari中document.readyState的狀態(tài)為loaded或complete時(shí),css文件引入還未能確定是不是解析完了的,所以要通過判斷其css文件數(shù)目
(6):最后,如果上面的hack都不支持的話…就用最保險(xiǎn)的load事件,保證能執(zhí)行到初始化代碼.
您可能感興趣的文章:
- jquery $(document).ready() 與window.onload的區(qū)別
- jQuery之$(document).ready()使用介紹
- JQuery onload、ready概念介紹及使用方法
- jquery中的$(document).ready()使用小結(jié)
- Jquery中"$(document).ready(function(){ })"函數(shù)的使用詳解
- jquery的$(document).ready()和onload的加載順序
- jquery ready()的幾種實(shí)現(xiàn)方法小結(jié)
- jquery中的$(document).ready()與window.onload的區(qū)別
- 用javascript實(shí)現(xiàn)jquery的document.ready功能的實(shí)現(xiàn)代碼
- JQuery 引發(fā)兩次$(document.ready)事件
- JQuery下關(guān)于$.Ready()的分析
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- jquery ready函數(shù)深入分析
相關(guān)文章
全面解析jQuery中的$(window)與$(document)的用法區(qū)別
這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別,具體內(nèi)容大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法
這篇文章主要介紹了jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法,涉及jQuery操作xml格式數(shù)據(jù)及表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2016-12-12騰訊與新浪的通過IP地址獲取當(dāng)前地理位置(省份)的接口
通過IP地址獲取當(dāng)前地理位置(省份)的接口,方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07jQuery中parents()和parent()的區(qū)別分析
這篇文章主要介紹了jQuery中parents()和parent()的區(qū)別,具體分析了parents()和parent()的原理與用法區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢及分頁功能的方法
這篇文章主要介紹了jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢及分頁功能的方法,涉及jQuery使用ajax技術(shù)針對xml格式數(shù)據(jù)的讀取、模糊查詢及分頁顯示等相關(guān)操作技巧,需要的朋友可以參考下2016-12-12