首先，頁面載入順序：
解析HTML結構。
載入外部腳本和樣式表檔案。
解析並執行腳本程式碼。
構造HTML DOM模型。
載入圖片等外部文件。
頁面載入完畢。
也就是：
html → head → title → #text(網頁標題) → style → 載入樣式→ 解析樣式→ link → 載入外部樣式表檔→ 解析外部樣式表→ script → 載入外部腳本檔→ 解析外部腳本檔→ 執行外部腳本→ body → div → script → 載入腳本→ 解析腳本→ 執行腳本→ img → script → 載入腳本→ 解析腳本→ 執行腳本→載入外部映像檔→ 頁面初始化完畢。
JS 的初始化裝載。
onload
不是在document 載入完成的時候調用的, 而是在頁面所有元素(包括圖片等) 全部加載完成才會調用. 如果頁面上有尺寸很大的圖片, 下載需要很長時間, 那麼腳本就一直不能被初始化, 直到圖片裝載完成, 嚴重時用戶體驗會受到很大影響.但是，window.onload 也並非是一無用處，很多情況下一些B/S軟體需要頁面全部加載後才提供用戶相關功能，這樣window .onload就可以提供一種「載入中」的功能，又或者是頁面內容很少，完全無需document.ready(); 根據各種情況，應該合理的使用onload 和ready。
使用onload載入：
複製代碼代碼如下:
window.onload=function(){
var currentRenderer = 'javascript';
FusionCharts.setCurrentRenderer(currentRenderer);
var chartObj = new FusionCharts({
swfUrl: "Pie3D.swf",
width: "290", height: "210",
id: 'sampleChart',
dataSource: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",
dataFormat: FusionChartsDataFormats.XMLURL,
renderAt: 'chart1div'
}).render();
}
ready
在W3C 中有個叫DOMContentLoaded 的事件,它會在DOM (文檔物件模型) 被載入完成的時候觸發.
方法一：
複製代碼代碼如下:
類似Jquery的$(function(){...}) $(document).ready(function(){...})
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();
調用時：
document.ready(function(){
alert('ok');
}
方法二：
複製代碼代碼如下:
/如果支援W3C DOM2, 則使用W3C 方法
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", te, false);
}
else if (/MSIE/i.test(navigator.userAgent)){/如果是IE 瀏覽器(不支援)
/建立一個script 標籤, 該標籤有defer 屬性, 當document 載入完畢時才會被載入
document.write("
var script = document.getElementByIdx_x("__ie_onload");
/如果文檔確實裝載完畢, 呼叫初始化方法
script.onreadystatechange = function() {
if (this.readyState == 'complete') {
te();
}
}
}
else if (/WebKit/i.test(navigator.userAgent)) {/如果是Safari 瀏覽器(不支援)
/建立定時器, 每0.01 秒檢驗一次, 如果文件載入完畢則呼叫初始化方法
var _timer = setInterval( function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
te();
}
}, 10);
}
else {/如果以上皆不是, 使用最壞的方法(本例中, Opera 7 將會跑到這裡來)
window.onload = function(e) {
te();
}
}
function te(){
alert('ok');
}