瀏覽器加載頁面的順序：

1、 解析HTML結構

2、 加載外部腳本和樣式表文件

3、 解析并執行腳本代碼

4、 構造HTML DOM模型==ready()

5、 加載圖片等組件

6、 頁面加載完畢==onload()

ready事件是在DOM模型構造完畢時觸發

load事件是在頁面加載完畢后觸發

function ready(fn) {if (document.addEventListener) {document.addEventListener('DOMContentLoaded', function () {//注銷事件, 避免反復觸發document.removeEventListener('DOMContentLoaded', arguments.callee, false);fn(); //執行函數}, false);} else if (document.attachEvent) { //IEdocument.attachEvent('onreadystatechange', function () {if (document.readyState == 'complete') {document.detachEvent('onreadystatechange', arguments.callee);fn(); //函數執行}});} };

?ready()加強版

/* * 傳遞函數給whenReady() * 當文檔解析完畢且為操作準備就緒時，函數作為document的方法調用 */ var whenReady = (function () { //這個函數返回whenReady()函數var funcs = []; //當獲得事件時，要運行的函數var ready = false; //當觸發事件處理程序時,切換為true//當文檔就緒時,調用事件處理程序function handler(e) {if (ready) return; //確保事件處理程序只完整運行一次//如果發生onreadystatechange事件，但其狀態不是complete的話,那么文檔尚未準備好if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {return;}//運行所有注冊函數//注意每次都要計算funcs.length//以防這些函數的調用可能會導致注冊更多的函數for (var i = 0; i < funcs.length; i ) {funcs[i].call(document);}//事件處理函數完整執行,切換ready狀態, 并移除所有函數ready = true;funcs = null;}//為接收到的任何事件注冊處理程序if (document.addEventListener) {document.addEventListener('DOMContentLoaded', handler, false);document.addEventListener('readystatechange', handler, false); //IE9 window.addEventListener('load', handler, false);} else if (document.attachEvent) {document.attachEvent('onreadystatechange', handler);window.attachEvent('onload', handler);}//返回whenReady()函數return function whenReady(fn) {if (ready) { fn.call(document); }else { funcs.push(fn); }} })(); //--------------------- test ----- function t1() {console.log('t1'); } function t2() {console.log('t2'); } // t2-t1-t2 whenReady(t1); t2(); whenReady(t2);

?

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

總結

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

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