javascript的事件載入

通常來說，window.onload就夠用了，如果想載入多個事件，我們可以採取以下方式：

window.onload = function(){       func1();       func2();       func3();       //更多載入事件………………}

但是如果我們需要頁面完全呈現前做一些東西呢，如通過指令碼載入其他js檔案，或在IE6實現fixed……這些東西就要用到domReady了，domReady好像是jQuery的叫做，一個載入函數。在W3C的草稿中，它其中是一種事件，名為 DOMContentLoaded。DOMContentLoaded事件比onload事件快許多，它是在DOM樹建成之時就觸發，而onload必須要等待頁面所有元素的資源都下載完畢時才觸發。在標準遊覽器中調用這個事件很簡單的：

       document.addEventListener('DOMContentLoaded', function(){          alert("DOM樹建成了！")        }, false);

IE雖然有這麼多私人事件，但卻沒有一個與它相同的，最接近的是readystatechange，加上其他亂七八糟的東西，我們還是能夠類比DOMContentLoaded的。

有時我們載入事件時，可能不是單是通過一個函數就載入完的。比如我要用window.onload載入一段代碼，但我還通過JS檔案載入一個開源外掛程式，那個外掛程式當它要處理DOM，還是需要等到DOM樹完成之時，因此它可能也要搞一個window.onload塊。這時頁面擁有兩個window.onload代碼塊，很顯然，第二個會覆蓋掉第一個。這時，我們就要用到loadEvent這樣的多重載入函數了。

var loadEvent = function(fn) {    var oldonload = window.onload;    if (typeof window.onload != 'function') {        window.onload = fn;    }else {        window.onload = function() {            oldonload();            fn();        }    }}//*******************用法*******************loadEvent(handler1);loadEvent(handler2);loadEvent(handler3);

在標準遊覽器中，因為有addEventListener，很輕鬆就實現DOMContentLoaded的多重載入，那IE怎麼辦？唯一的辦法是，無論是addEventListener還是attachEvent都執行，把多個要載入的代碼整合到一塊，一次性執行。因此，我們需要一個數組。

window.DOMLoadEvents = [];var addDOMLoadEvent = function(handler) {window.DOMLoadEvents[window.DOMLoadEvents.length]=handler}addDOMLoadEvent(handler);addDOMLoadEvent(handler);addDOMLoadEvent(handler); //更多載入事件

那麼怎樣執行它們，上面僅僅是添加事件，我們需要另一個函數，專門用來執行它的。

    var fireContentLoadedEvent = function() {        if (arguments.callee.loaded) return;        //讓此函數僅僅執行一次        arguments.callee.loaded = true;        var handlers = window.DOMLoadEvents,length = handlers.length;        for (var i=0; i<length; i++) {            var func = handlers[i];            func();//執行要在domReady啟動並執行代碼        }    }

那麼我們要在什麼時候執行上面的函數呢？我們僅討論IE的情況。在IE中，任何DOM元素都有一個doScroll 方法，無論它們是否支援捲軸。為了判斷DOM樹是否建成，我們只看看documentElement是否完整就是，因為，它作為最外層的元素，作為DOM樹的根部而存在，如果documentElement完整的話，就可以調用doScroll方法了。當頁面一載入JS時，我們就執行此方法，當然要如果documentElement還不完整就會報錯，我們在catch塊中重新調用它，一直到成功執行，成功執行時就可以調用fireContentLoadedEvent 方法了。

參數	描述
scrollbarDown	Default. Down scroll arrow is at the specified location
scrollbarHThumb	Horizontal scroll thumb or box is at the specified location
scrollbarLeft	Left scroll arrow is at the specified location
scrollbarPageDown	Page-down scroll bar shaft is at the specified location
scrollbarPageLeft	Page-left scroll bar shaft is at the specified location
scrollbarPageRight	Page-right scroll bar shaft is at the specified location
scrollbarPageUp	Page-up scroll bar shaft is at the specified location
scrollbarRight	Right scroll arrow is at the specified location
scrollbarUp	Up scroll arrow is at the specified location
scrollbarVThumb	Vertical scroll thumb or box is at the specified location
down	Composite reference to scrollbarDown
left	Composite reference to scrollbarLeft
pageDown	Composite reference to scrollbarPageDown.
pageLeft	Composite reference to scrollbarPageLeft.
pageRight	Composite reference to scrollbarPageRight.
pageUp	Composite reference to scrollbarPageUp.
right	Composite reference to scrollbarRight.
up	Composite reference to scrollbarUp.

    var  pollDoScroll = function() {        try {            document.documentElement.doScroll('left');        }catch(e) {            setTimeout(arguments.callee, 10);            return;        }        fireContentLoadedEvent();    }

我們要頁面載入JS立即執行此函數，是直接pollDoScroll()嗎？！不要忘記，它只是應用於IE中，我們還要判定一下瀏覽器。如果支援addEventListener，也肯定支援DOMContentLoaded了（不考慮舊版本），否則就運行pollDoScroll函數。

if (document.addEventListener) {    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);} else {    pollDoScroll();}

完整的代碼如下：

window.DOMLoadEvents = [];var addDOMLoadEvent = function(handler) {    window.DOMLoadEvents[window.DOMLoadEvents.length]=handler}var fireContentLoadedEvent = function() {    if (arguments.callee.loaded) return;    //讓此函數僅僅執行一次    arguments.callee.loaded = true;    var handlers = window.DOMLoadEvents,length = handlers.length;    for (var i=0; i<length; i++) {        var func = handlers[i];        func();//執行要在domReady啟動並執行代碼    }}var pollDoScroll = function() {    try {        document.documentElement.doScroll('left');    }catch(e) {        setTimeout(arguments.callee, 10);        return;    }    fireContentLoadedEvent();}if (document.addEventListener) {    document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);} else {    pollDoScroll();}

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head id="head"><br /> <meta charset="utf-8"/><br /> <title>事件載入 by司徒正美</title><br /> <script type="text/javascript"><br /> window.DOMLoadEvents = [];<br /> var addDOMLoadEvent = function(handler) {<br /> window.DOMLoadEvents[window.DOMLoadEvents.length]=handler<br /> }<br /> var fireContentLoadedEvent = function() {<br /> if (arguments.callee.loaded) return;<br /> //讓此函數僅僅執行一次<br /> arguments.callee.loaded = true;<br /> var handlers = window.DOMLoadEvents,length = handlers.length;<br /> for (var i=0; i<length; i++) {<br /> var func = handlers[i];<br /> func();//執行要在domReady啟動並執行代碼<br /> }<br /> }<br /> var pollDoScroll = function() {<br /> try {<br /> document.documentElement.doScroll('left');<br /> }catch(e) {<br /> setTimeout(arguments.callee, 1);<br /> return;<br /> }<br /> fireContentLoadedEvent();<br /> };<br /> if (document.addEventListener) {<br /> document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);<br /> } else {<br /> pollDoScroll();<br /> }</p><p> addDOMLoadEvent(function(){<br /> alert("趕在頁面載入完成alert一下！")<br /> });<br /> addDOMLoadEvent(function(){<br /> alert("測試多重載入！")<br /> });<br /> addDOMLoadEvent(function(){<br /> alert("測試多重載入！")<br /> });<br /> </script><br /> </head><br /> <body><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="圖片1" /><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="圖片2" /><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="圖片3" /><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="圖片4" /><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="圖片5" /><br /> <table class="filament_table" cellspacing="0" width="700" rules="cols" ><br /> <col class="grey" width="25%"></col><br /> <col class="yellow"></col><br /> <thead><br /> <tr><br /> <th><br /> 參數<br /> </th><br /> <th><br /> 描述<br /> </th><br /> </tr><br /> </thead><br /> <tbody><br /> <tr><br /> <td><br /> scrollbarDown<br /> </td><br /> <td><br /> Default. Down scroll arrow is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarHThumb<br /> </td><br /> <td><br /> Horizontal scroll thumb or box is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarLeft<br /> </td><br /> <td><br /> Left scroll arrow is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarPageDown<br /> </td><br /> <td><br /> Page-down scroll bar shaft is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarPageLeft<br /> </td><br /> <td><br /> Page-left scroll bar shaft is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarPageRight<br /> </td><br /> <td><br /> Page-right scroll bar shaft is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarPageUp<br /> </td><br /> <td><br /> Page-up scroll bar shaft is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarRight<br /> </td><br /> <td><br /> Right scroll arrow is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarUp<br /> </td><br /> <td><br /> Up scroll arrow is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> scrollbarVThumb<br /> </td><br /> <td><br /> Vertical scroll thumb or box is at the specified location<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> down<br /> </td><br /> <td><br /> Composite reference to scrollbarDown<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> left<br /> </td><br /> <td><br /> Composite reference to scrollbarLeft<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> pageDown<br /> </td><br /> <td><br /> Composite reference to scrollbarPageDown.<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> pageLeft<br /> </td><br /> <td><br /> Composite reference to scrollbarPageLeft.<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> pageRight<br /> </td><br /> <td><br /> Composite reference to scrollbarPageRight.<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> pageUp<br /> </td><br /> <td><br /> Composite reference to scrollbarPageUp.<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> right<br /> </td><br /> <td><br /> Composite reference to scrollbarRight.<br /> </td><br /> </tr><br /> <tr><br /> <td><br /> up<br /> </td><br /> <td><br /> Composite reference to scrollbarUp.<br /> </td><br /> </tr><br /> </tbody><br /> </table></p><p> <p>我們添加了些圖片與表格延緩頁面的載入速度</p><br /> </body><br /></html><br />

運行代碼