瀏覽器加載頁面的順序:
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) { //IE document.attachEvent('onreadystatechange', function() { if(document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); //函數執行 } }); } };
ready()加強版(自JavaScript權威指南)
/* * 傳遞函數給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);