先看這兩句代碼：window.addEventListener('load',loaded,false);document.addEventListener('DOMContentLoaded',loaded,false);總結：load事件是在頁面所有元素都加載完后觸發;DOMContentLoaded，它是指dom tree加載完就觸發;防止了頁面加載被堵塞。DOMContentLoaded事件（IE9 以及其他瀏覽器）onreadystatechange事件（IE9以下瀏覽器）

?

今天閑來無事研究研究jquery.ready()的內部實現，看JQ的源碼一頭霧水，由于自己很菜了，于是翻了翻牛人的播客，講述詳細，收獲頗多。

先普及一下jquery.ready()和window.onload，window.onload事件是在頁面所有的資源都加載完畢后觸發的. 如果頁面上有大圖片等資源響應緩慢, 會導致window.onload事件遲遲無法觸發.所以出現了DOM Ready事件. 此事件在DOM文檔結構準備完畢后觸發, 即在資源加載前觸發.

var $ = ready = window.ready = function(fn){ if(document.addEventListener){//兼容非IE document.addEventListener("DOMContentLoaded",function(){ //注銷事件，避免反復觸發 document.removeEventListener("DOMContentLoaded",arguments.callee,false); fn();//調用參數函數 },false); }else if(document.attachEvent){//兼容IE IEContentLoaded (window, fn);} function IEContentLoaded (w, fn) {var d = w.document, done = false,// only fire onceinit = function () {if (!done) {done = true;fn();}};// polling for no errors(function () {try {// throws errors until after ondocumentreadyd.documentElement.doScroll('left');} catch (e) {setTimeout(arguments.callee, 50);return;}// no errors, fireinit();})();// trying to always fire before onloadd.onreadystatechange = function() {if (d.readyState == 'complete') {d.onreadystatechange = null;init();}};} } ready(function(){alert(1)})

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

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