摘要:屬性共中狀態初始狀態加載中加載完成已加載并可與用戶交互,但還需要加載圖片等其他資源全部資源加載完成文檔加載順序解析結構加載外部腳本和樣式表文件解析并執行腳本樹構建完成加載外部資源文件圖片等頁面加載完成動態加載公共方法動態加載外部文件,并執行
DOM readyState屬性共5中狀態
uninitialized:初始狀態
loading:document加載中
loaded: document加載完成
interactive:已加載并可與用戶交互,但還需要加載圖片等其他資源
complete:全部資源加載完成
DOM文檔加載順序:解析HTML結構
加載外部腳本和樣式表文件(loading)
解析并執行腳本
DOM樹構建完成(readyState:interactive)
加載外部資源文件(圖片等)
頁面加載完成(readyState:complete)
動態加載公共方法var DynamciLoadUtil = { // 動態加載外部js文件,并執行回調 loadJS: function(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; if(typeof callback == "function"){ script.onload = script.onreadystatechange = function(){ if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){ callback(); script.onload = script.onreadystatechange = null; } } } document.body.appendChild(script); //document.getElementsByTagName("body")[0].appendChild(script); }, // 行內方式動態加載js代碼 loadJSText: function(jsText){ var script = document.createElement("script"); script.type = "text/javascript"; try { // Firefox,Safari,Chrome,Opera支持 script.appendChild(document.createTextNode(jsText)); } catch(ex){ // IE早期的瀏覽器,需要使用script的text屬性來指定js代碼 script.text = jsText; } document.body.appendChild(script); }, // 動態加載外部CSS文件 loadCSS:function(url){ var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.url = url; document.getElementsByTagName("head")[0].appendChild(link); }, // 使用