一般的我們用window.onload()來判斷文件是否載入完成,我們一般採用下面的做法:
當文件載入全部完後,我們在執行程式碼塊(很顯然,當需要載入的文件及節點龐大時,使用者體驗可能會變很差)
window.onload = function () { //do something... }
接下來,我們封裝一個domReady()函式。
讓程式碼塊在dom樹建立完成後就開始執行,而不用等到文件全部載入完成後在執行。
new function(){ dom = []; dom.isReady = false; dom.isFunction = function(obj){ return Object.prototype.toString.call(obj) === "[object Function]"; }; dom.Ready = function(fn){ dom.initReady();//如果沒有建成DOM樹,則走第二步,儲存起來一起殺 if(dom.isFunction(fn)){ if(dom.isReady){ fn();//如果已經建成DOM,則來一個殺一個 }else{ dom.push(fn);//儲存載入事件 } } }; dom.fireReady =function(){ if (dom.isReady) return; dom.isReady = true; for(var i=0,n=dom.length;i<n;i++){ var fn = dom[i]; fn(); } dom.length = 0;//清空事件 }; dom.initReady = function(){ if (document.addEventListener) { document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除載入函式 dom.fireReady(); }, false ); }else{ if (document.getElementById) { document.write ("<script id=\"ie-domReady\" defer='defer' src=\"//:\"><\/script>"); document.getElementById("ie-domReady").onreadystatechange = function() { if (this.readyState === "complete") { dom.fireReady(); this.onreadystatechange = null; this.parentNode.removeChild(this) } }; } } } };