解析頁面載入與js函數的執行 onload or ready_jquery

首先，頁面載入順序：
解析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載入：

複製程式碼 程式碼如下:

            var currentRenderer = 'javascript';           
            var chartObj = new FusionCharts({
               width: " 290", height: "210",
                id: 'sampleChart',
    xml&val={{pre_num}}",
                dataFormat: FusionChartsDataFormats .XMLURL,         
                renderAt: 'chart10'



ready

在W3C 中有個叫DOMContentLoaded 的事件,它會在DOM (文檔物件模型) 被載入完成的時候觸發.
方法一：

複製程式碼

代碼如下: 代碼如下:

代碼如下:



代碼如下:(function () {
var ie = !!(window. attachEvent && !window.opera);
var wk = /webkit/(d )/i.test(navigator.userAgent) && (RegExp.$1 var fn = [];
var run = function () { for (var i = 0; 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>    /建立一個script 標籤, 此標籤有defer 屬性, 當document 載入完畢時才會載入
    document.write("
    var script = document.getElementByIdx_x("__ie_onload");
    if (this.readyState == 'complete') {
        te();
        }
    }
test/建立計時器, 每0.01 秒檢定一次, 如果文件載入後則呼叫初始化方法
var _timer = setInterval( function() {
    if (/ loaded|complete/.test(document.readyState)) {
        clearInterval(_timer);
        te();
        te();
       se {/若以上皆非, 使用最糟糕的方法(本例, Opera 7 將會跑到這裡來)
    window.onload = function(e) {
        te();
        te();
  }
function te(){
    alert('ok');
}