基于jQuery v1.8.3

在js與DOM交互之前要確保DOM已經加載構建完成，在jQuery中都是使用 (fn)或者(document).ready(fn)來確保自己寫的代碼在DOM構建完成之后執行。
那么jQuery的ready事件內部怎么實現的呢？

通過閱讀源碼（line:842 ~ 898）知道jQuery內部使用四種判別文檔是否加載完成的事件：

DOMContentLoaded 初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載

load 一個頁面完全加載之后觸發

readyStateChange 文檔加載狀態（document.readyState）改變的時候觸發，當document.readyState === ‘complete’ 為 true 表示文檔解析完成。

readyState可能的值有：

1. loading 加載2. interactive 互動3. complete 完成

doScroll 低版本IE支持的事件，如果調用不出錯就表示文檔解析完成

部分源碼如下：

/** *先檢查一下文檔是否加載完成了，如果執行這個方法的時候文檔已經加載完成還不知道就尷尬了。。。后面注冊的監聽文檔是否加載完成的事件都不會被觸發 *因為我們都知道事件的特性就是錯過了就是錯過了 */ if ( document.readyState === "complete" ) {setTimeout( jQuery.ready, 1 ); } else if ( document.addEventListener ) {// 檢測是否支持 DOMContentLoaded，該事件這是H5新加的事件，在DOM結構構件完成觸發，不會等待資源的下載如IMG等，所以會比window.onload提前觸發document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );// 監聽onload事件window.addEventListener( "load", jQuery.ready, false ); } else {// 這里是低版本的IE瀏覽器// 通過attachEvent監聽readystatechange和load事件document.attachEvent( "onreadystatechange", DOMContentLoaded );window.attachEvent( "onload", jQuery.ready );// 在頂層不在iframe里面var top = false;try {top = window.frameElement == null && document.documentElement;} catch(e) {}if ( top && top.doScroll ) {(function doScrollCheck() {if ( !jQuery.isReady ) {try {top.doScroll("left");} catch(e) {return setTimeout( doScrollCheck, 50 );}jQuery.ready();}})();}

通過以上源碼分析，自己來實現一個完整的

需求：

確保代碼會在文檔加載完的第一時間被調用

可以正確處理多次調用（調用多次ready(fn); ready(fn)）

(function(window, undefined){// 任務隊列var PENDING = 'pending',COMPLETE = 'complete',first = true, // 第一次調用ready方法queue = [],state = PENDING; // pending complatevar obser = {queue: [],fire: function(){while(this.queue.length){this.queue.shift()();}},add: function(fn){this.queue.push(fn);}};function loaded(){// 防止被觸發多次if(state === COMPLETE) return;if(document.addEventListener){state = COMPLETE;obser.fire();document.removeEventListener('DOMContentLoaded', loaded, false);window.removeEventListener('load', loaded, false);}else if(document.readyState === 'complete'){// 這里必須要是 document.readyState === 'complate' 才行state = COMPLETE;obser.fire();document.detachEvent('DOMContentLoaded', loaded);window.detachEvent('load', loaded);}}function ready(fn){if(first){// 如果是第一次調用順待要注冊一下事件if(document.readyState === 'complete'){loaded();}else if(document.addEventListener){document.addEventListener('DOMContentLoaded', loaded, false);window.addEventListener('load', loaded, false);}else{// 這里處理IEdocument.attachEvent('onreadystatechange', loaded);window.attachEvent('onload', loaded);}}if(state === COMPLETE){fn();}else{obser.add(fn);}}window.ready = ready; })(window, undefined);// 之后直接調用ready(fn)即可

總結

以上是生活随笔為你收集整理的jQuery中的ready的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。