jQuery的ready方法實(shí)現(xiàn)原理分析
jQuery中的ready方法實(shí)現(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實(shí)現(xiàn)動態(tài)生成年月日級聯(lián)下拉列表示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動態(tài)生成年月日級聯(lián)下拉列表,結(jié)合具體實(shí)例形式分析了jQuery日期時間運(yùn)算構(gòu)造級聯(lián)下拉列表相關(guān)操作技巧,需要的朋友可以參考下2019-05-05jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果
這篇文章主要介紹了jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果,涉及jquery操作圖片動態(tài)顯示效果,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08Jquery多選下拉列表插件jquery multiselect功能介紹及使用
支持點(diǎn)擊label實(shí)現(xiàn)checkbox組選擇,頭部選項,如全選/ 取消全選 /關(guān)閉功能,支持鍵盤選擇等等,下面與大家分享下具體使用2013-05-05淺談ajax在jquery中的請求和servlet中的響應(yīng)
下面小編就為大家分享一篇淺談ajax在jquery中的請求和servlet中的響應(yīng),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jQuery防止click雙擊多次提交及傳遞動態(tài)函數(shù)或多參數(shù)
這篇文章主要介紹了jQuery防止click雙擊多次提交及傳遞動態(tài)函數(shù)方法,需要的朋友可以參考下2014-04-04Hallo.js基于jQuery UI所見即所得的Web編輯器
Hallo.js是一個簡單的富文本編輯器,基于jQuery UI的部件,利用HTML5的contentEditable功能實(shí)現(xiàn)了即時編輯功能,其主要目的是為了提供良好的書寫體驗(yàn),對Hallo.js感興趣的小伙伴們可以參考一下2016-01-01JQuery實(shí)現(xiàn)點(diǎn)擊div以外的位置隱藏該div窗口
鼠標(biāo)點(diǎn)擊div外的地方讓div窗口隱藏消失,實(shí)現(xiàn)方法有很多,在本文將為大家介紹下jquery中時如何實(shí)現(xiàn)的,感興趣的朋友不要錯過了哈2013-09-09