在給網頁加一些特效時經常要在<body>中加入“onload”事件，即在網頁載入完後執行某事件，例如：<body onload=”alert(‘歡迎光臨!')”，但這樣做有個大的缺陷，事件會在網頁完全下載完後才會執行，包括網頁中的圖片或Flash等，如果網頁中的圖片比較大或有很多圖，可能還沒等網頁完全下載完網友已經點選連結到其它網頁去了，這樣這個事件就沒有執行了。另外在某些特殊情況下可能還修改不了網頁的body參數。如在別人網站發表文章時，或用CMS整站系統時。
這時我們會想到用“window.onload”或“document.body.onload”來替換<body>中的onload事件，的確，問題解決了，但在載入多個onload事件時或控制加裁順序時還會出現一些問題，直到我發現“Paul Koch”寫的addLoadEvent()函數後，所有問題都解決了。如果大家一定要用“window.onload”或 “document.body.onload”來替換<body>中的onload事件，建議大家用前者，Firefox瀏覽器中無效，即相容性有問題。
JavaScript代碼
複製代碼 代碼如下:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
調用方法：
複製代碼 代碼如下:
addLoadEvent(wwwjb51());
//或
addLoadEvent(function(){
document.body.style.backgroundColor = 'yellow';
jb51();
});
示範代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>addLoadEvent() test</title> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(function() { document.body.style.backgroundColor = 'yellow'; //設定背景顏色 }) addLoadEvent(function() { document.body.appendChild(document.createTextNode('雲棲社區'));; }) addLoadEvent(function() { document.body.appendChild(document.createTextNode('www.jb51.net'));; }) </script> </head> <body> <p>Here goes...</p> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
推薦大家以後都用addLoadEvent()函數來替換<body>中加入“onload”事件。addLoadEvent ()自訂代碼來源於：http://www.simonwillison.net/2004/May/26/addLoadEvent/
addLoadEvent工作流程：
把現有的window.onload事件處理函數的值存入變數oldonload。
如果在這個處理函數上還沒有綁定任何函數，就像平時那樣把新函數添加給它；
如果在這個處理函數已經綁定了一些函數，就把函數追回到現有指令未尾。
瀏覽器載入html內容是自上而下的（預設），而JS一般是在哪裡引入——想想如果JS裡麵包含了一些即時執行指令，
它會操作根本不存在元素節點（因為還沒有載入完）會有什麼後果？結果就是出錯。
addLoadEvent可以實現無論有多少個函數，都能讓它們同時和window.onload事件綁定。
onload事件-----addLoadEvent函數
複製代碼 代碼如下:
window.onload = myfunction();
假如我們希望某個函數在網頁載入完畢之後就立即執行。網頁載入完畢時會觸發一個onload事件，所以我們可以利用onload事件來載入這個函數。Onload事件與window對象相關聯。如：
把myfunction函數綁定到這個事件上：
一個函數我們可以利用上面的解決,那兩個、三個甚至更多呢？怎麼解決？？
假如我們有firstFunction和secondFunction兩個函數，是不是就是下面這樣寫呢：
複製代碼 代碼如下:
window.onload = firstFunction;
window.onload = secondFunction;
但是每個處理函數只能綁定一條指令。所以上面的不行。因為secondFunction函數將會取代firstFunction函數。
有一種辦法可以協助我們解決上面問題：即我們先建立一個匿名函數來容納這兩個函數，然後把那個匿名函數綁定到onload事件上，如下：
複製代碼 代碼如下:
window.onload = function(){
firstFunction();
secondFunction();
}
這確實是一個好的、簡答的方法。
但是其實還存在一個最佳的解決方案——不管你打算在頁面載入完畢後要執行多少個函數，利用該函數都可以輕鬆的實現。
該函數名為addLoadEvent。該函數僅一個參數：該參數指定了你打算在頁面載入完畢後需要執行的函數的函數名。
addLoadEvent()函數代碼如下：
複製代碼 代碼如下:
function addLoadEvent(func){
var oldonLoad = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent函數主要是完成如下的操作：
1、把現有的window.onload事件處理函數的值存入到oldonload中。
2、如果在這個處理函數上還沒有綁定任何函數，就將該函數添加給它。
3、如果在這個處理函數上已經綁定了一些函數，就把該函數追加到現有指定的末尾。
通過addLoadEvent函數，只需要調用該函數就可以進行綁定了。
複製代碼 代碼如下:
addLoadEvent(firestFunction);
addLoadEvent(secondFunction);
所以這個函數非常有用，尤其當代碼變得很複雜的時候。無論你打算在頁面載入完畢時執行多少個函數，只需要多寫幾條這樣的語句就可以解決了。方便、實用。
