jQuery的ready方法實現(xiàn)原理分析
jQuery中的ready方法實現(xiàn)了當(dāng)頁面加載完成后才執(zhí)行的效果,但他并不是window.onload或者doucment.onload的封裝,而是使用 標(biāo)準(zhǔn)W3C瀏覽器DOM隱藏api和IE瀏覽器缺陷來完成的,首先,我們來看jQuery的代碼
DOMContentLoaded = function()
{
//取消事件監(jiān)聽,執(zhí)行ready方法
if ( document.addEventListener )
{
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
jQuery.ready();
}
else if ( document.readyState === "complete" )
{
document.detachEvent( "onreadystatechange", DOMContentLoaded );
jQuery.ready();
}
};
jQuery.ready.promise = function( obj ) {
if ( !readyList ) {
readyList = jQuery.Deferred();
//表示頁面已經(jīng)加載完成,直接調(diào)用 ready方法
if ( document.readyState === "complete" ) {
//將 jQuery.ready壓入異步消息隊列,設(shè)置延遲時間1毫秒(注意,有些瀏覽器延遲不能小于4毫秒)
setTimeout( jQuery.ready);
}
else if ( document.addEventListener ) //
{
//監(jiān)聽DOM加載完成
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
//這里是為了確保所有ready執(zhí)行結(jié)束,如果DOMContentLoaded方法執(zhí)行了,將有一個狀態(tài)值 isReady被設(shè)置為true,因此,
//ready方法一旦執(zhí)行,那么將只執(zhí)行一次,window.addEventListener中的ready 將被 return 中斷
window.addEventListener( "load", jQuery.ready, false );
} else {
//低版本的IE瀏覽器
document.attachEvent( "onreadystatechange", DOMContentLoaded );
window.attachEvent( "onload", jQuery.ready );
var top = false;
try {
top = window.frameElement == null && document.documentElement;
} catch(e) {}
if ( top && top.doScroll ) //剔除iframe的成分
{
(function doScrollCheck() {
if ( !jQuery.isReady ) {
try {
//根據(jù)bug來兼容低版本的IE http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
//由于低版本的IE 瀏覽器,onreadystatechange事件不可靠,因此需要根據(jù)各個bug來判斷頁面是否已加載完成
return setTimeout( doScrollCheck, 50 );
}
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
ready: function( wait )
{
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
//判斷頁面是否已完成加載并且是否已經(jīng)執(zhí)行ready方法
return;
}
if ( !document.body ) {
return setTimeout( jQuery.ready );
}
jQuery.isReady = true; //指示ready方法已被執(zhí)行
if ( wait !== true && --jQuery.readyWait > 0 ) {
return;
}
readyList.resolveWith( document, [ jQuery ] );
if ( jQuery.fn.trigger ) {
jQuery( document ).trigger("ready").off("ready");
}
},
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
jquery 得到當(dāng)前頁面高度和寬度的兩個函數(shù)
得到當(dāng)前頁面高度和寬度的兩個函數(shù)2010-02-02
jQuery 1.0.4 - New Wave Javascript(js源文件)
jQuery 1.0.4 - New Wave Javascript(js源文件)...2007-01-01
Easyui筆記2:實現(xiàn)datagrid多行刪除的示例代碼
本篇文章主要介紹了Easyui筆記2:實現(xiàn)datagrid多行刪除,詳細介紹了完成一個多行勾選并刪除的功能。有興趣的可以了解一下。2017-01-01
jquery+css3實現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實現(xiàn)的經(jīng)典彈出層效果,結(jié)合實例形式分析了jquery+css3實現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
jQuery contains過濾器實現(xiàn)精確匹配使用方法
contains 選擇器選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本,或者被包含于子元素中。經(jīng)常與其他元素/選擇器一起使用,來選擇指定的組中包含指定文本的元素2013-04-04
jquery popupDialog 使用 加載jsp頁面的方法
下面小編就為大家?guī)硪黄猨query popupDialog 使用 加載jsp頁面的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10

