javascript addLoadEvent函數(shù)說明
更新時間：2010年01月02日 02:43:11 作者：
網(wǎng)頁加載完整后會觸發(fā)一個onload事件，默認地一個事件只能和一個函數(shù)綁定。
在給網(wǎng)頁加一些特效時經(jīng)常要在<body>中加入“onload”事件，即在網(wǎng)頁加載完后執(zhí)行某事件，例如：<body onload=”alert(‘歡迎光臨!')”，但這樣做有個大的缺陷，事件會在網(wǎng)頁完全下載完后才會執(zhí)行，包括網(wǎng)頁中的圖片或Flash等，如果網(wǎng)頁中的圖片比較大或有很多圖，可能還沒等網(wǎng)頁完全下載完網(wǎng)友已經(jīng)點擊鏈接到其它網(wǎng)頁去了，這樣這個事件就沒有執(zhí)行了。另外在某些特殊情況下可能還修改不了網(wǎng)頁的body參數(shù)。如在別人網(wǎng)站發(fā)表文章時，或用CMS整站系統(tǒng)時。
這時我們會想到用“window.onload”或“document.body.onload”來替換<body>中的onload事件，的確，問題解決了，但在加載多個onload事件時或控制加裁順序時還會出現(xiàn)一些問題，直到我發(fā)現(xiàn)“Paul Koch”寫的addLoadEvent()函數(shù)后，所有問題都解決了。如果大家一定要用“window.onload”或 “document.body.onload”來替換<body>中的onload事件，建議大家用前者，F(xiàn)irefox瀏覽器中無效，即兼容性有問題。
JavaScript代碼
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
調(diào)用方法：
addLoadEvent(wwwjb51());
//或
addLoadEvent(function(){
document.body.style.backgroundColor = 'yellow';
jb51();
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
推薦大家以后都用addLoadEvent()函數(shù)來替換<body>中加入“onload”事件。addLoadEvent ()自定義代碼來源于：http://www.simonwillison.net/2004/May/26/addLoadEvent/
addLoadEvent工作流程：
把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload。
如果在這個處理函數(shù)上還沒有綁定任何函數(shù)，就像平時那樣把新函數(shù)添加給它；
如果在這個處理函數(shù)已經(jīng)綁定了一些函數(shù)，就把函數(shù)追回到現(xiàn)有指令未尾。
瀏覽器加載html內(nèi)容是自上而下的（默認），而JS一般是在哪里引入——想想如果JS里面包含了一些即時執(zhí)行指令，
它會操作根本不存在元素節(jié)點（因為還沒有加載完）會有什么后果？結(jié)果就是出錯。
addLoadEvent可以實現(xiàn)無論有多少個函數(shù)，都能讓它們同時和window.onload事件綁定。
onload事件-----addLoadEvent函數(shù)
window.onload = myfunction();
假如我們希望某個函數(shù)在網(wǎng)頁加載完畢之后就立即執(zhí)行。網(wǎng)頁加載完畢時會觸發(fā)一個onload事件，所以我們可以利用onload事件來加載這個函數(shù)。Onload事件與window對象相關(guān)聯(lián)。如：
把myfunction函數(shù)綁定到這個事件上：
一個函數(shù)我們可以利用上面的解決,那兩個、三個甚至更多呢？怎么解決？？
假如我們有firstFunction和secondFunction兩個函數(shù)，是不是就是下面這樣寫呢：
window.onload = firstFunction;
window.onload = secondFunction;
但是每個處理函數(shù)只能綁定一條指令。所以上面的不行。因為secondFunction函數(shù)將會取代firstFunction函數(shù)。
有一種辦法可以幫助我們解決上面問題：即我們先創(chuàng)建一個匿名函數(shù)來容納這兩個函數(shù)，然后把那個匿名函數(shù)綁定到onload事件上，如下：
window.onload = function(){
firstFunction();
secondFunction();
}
這確實是一個好的、簡答的方法。
但是其實還存在一個最佳的解決方案——不管你打算在頁面加載完畢后要執(zhí)行多少個函數(shù)，利用該函數(shù)都可以輕松的實現(xiàn)。
該函數(shù)名為addLoadEvent。該函數(shù)僅一個參數(shù)：該參數(shù)指定了你打算在頁面加載完畢后需要執(zhí)行的函數(shù)的函數(shù)名。
addLoadEvent()函數(shù)代碼如下：
function addLoadEvent(func){
var oldonLoad = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent函數(shù)主要是完成如下的操作：
1、把現(xiàn)有的window.onload事件處理函數(shù)的值存入到oldonload中。
2、如果在這個處理函數(shù)上還沒有綁定任何函數(shù)，就將該函數(shù)添加給它。
3、如果在這個處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把該函數(shù)追加到現(xiàn)有指定的末尾。
通過addLoadEvent函數(shù)，只需要調(diào)用該函數(shù)就可以進行綁定了。
addLoadEvent(firestFunction);
addLoadEvent(secondFunction);
所以這個函數(shù)非常有用，尤其當代碼變得很復(fù)雜的時候。無論你打算在頁面加載完畢時執(zhí)行多少個函數(shù)，只需要多寫幾條這樣的語句就可以解決了。方便、實用。
這時我們會想到用“window.onload”或“document.body.onload”來替換<body>中的onload事件，的確，問題解決了，但在加載多個onload事件時或控制加裁順序時還會出現(xiàn)一些問題，直到我發(fā)現(xiàn)“Paul Koch”寫的addLoadEvent()函數(shù)后，所有問題都解決了。如果大家一定要用“window.onload”或 “document.body.onload”來替換<body>中的onload事件，建議大家用前者，F(xiàn)irefox瀏覽器中無效，即兼容性有問題。
JavaScript代碼
復(fù)制代碼 代碼如下:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
調(diào)用方法：
復(fù)制代碼 代碼如下:
addLoadEvent(wwwjb51());
//或
addLoadEvent(function(){
document.body.style.backgroundColor = 'yellow';
jb51();
});
演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
推薦大家以后都用addLoadEvent()函數(shù)來替換<body>中加入“onload”事件。addLoadEvent ()自定義代碼來源于：http://www.simonwillison.net/2004/May/26/addLoadEvent/
addLoadEvent工作流程：
把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload。
如果在這個處理函數(shù)上還沒有綁定任何函數(shù)，就像平時那樣把新函數(shù)添加給它；
如果在這個處理函數(shù)已經(jīng)綁定了一些函數(shù)，就把函數(shù)追回到現(xiàn)有指令未尾。
瀏覽器加載html內(nèi)容是自上而下的（默認），而JS一般是在哪里引入——想想如果JS里面包含了一些即時執(zhí)行指令，
它會操作根本不存在元素節(jié)點（因為還沒有加載完）會有什么后果？結(jié)果就是出錯。
addLoadEvent可以實現(xiàn)無論有多少個函數(shù)，都能讓它們同時和window.onload事件綁定。
onload事件-----addLoadEvent函數(shù)
復(fù)制代碼 代碼如下:
window.onload = myfunction();
假如我們希望某個函數(shù)在網(wǎng)頁加載完畢之后就立即執(zhí)行。網(wǎng)頁加載完畢時會觸發(fā)一個onload事件，所以我們可以利用onload事件來加載這個函數(shù)。Onload事件與window對象相關(guān)聯(lián)。如：
把myfunction函數(shù)綁定到這個事件上：
一個函數(shù)我們可以利用上面的解決,那兩個、三個甚至更多呢？怎么解決？？
假如我們有firstFunction和secondFunction兩個函數(shù)，是不是就是下面這樣寫呢：
復(fù)制代碼 代碼如下:
window.onload = firstFunction;
window.onload = secondFunction;
但是每個處理函數(shù)只能綁定一條指令。所以上面的不行。因為secondFunction函數(shù)將會取代firstFunction函數(shù)。
有一種辦法可以幫助我們解決上面問題：即我們先創(chuàng)建一個匿名函數(shù)來容納這兩個函數(shù)，然后把那個匿名函數(shù)綁定到onload事件上，如下：
復(fù)制代碼 代碼如下:
window.onload = function(){
firstFunction();
secondFunction();
}
這確實是一個好的、簡答的方法。
但是其實還存在一個最佳的解決方案——不管你打算在頁面加載完畢后要執(zhí)行多少個函數(shù)，利用該函數(shù)都可以輕松的實現(xiàn)。
該函數(shù)名為addLoadEvent。該函數(shù)僅一個參數(shù)：該參數(shù)指定了你打算在頁面加載完畢后需要執(zhí)行的函數(shù)的函數(shù)名。
addLoadEvent()函數(shù)代碼如下：
復(fù)制代碼 代碼如下:
function addLoadEvent(func){
var oldonLoad = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent函數(shù)主要是完成如下的操作：
1、把現(xiàn)有的window.onload事件處理函數(shù)的值存入到oldonload中。
2、如果在這個處理函數(shù)上還沒有綁定任何函數(shù)，就將該函數(shù)添加給它。
3、如果在這個處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把該函數(shù)追加到現(xiàn)有指定的末尾。
通過addLoadEvent函數(shù)，只需要調(diào)用該函數(shù)就可以進行綁定了。
復(fù)制代碼 代碼如下:
addLoadEvent(firestFunction);
addLoadEvent(secondFunction);
所以這個函數(shù)非常有用，尤其當代碼變得很復(fù)雜的時候。無論你打算在頁面加載完畢時執(zhí)行多少個函數(shù)，只需要多寫幾條這樣的語句就可以解決了。方便、實用。
您可能感興趣的文章:
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談js的解析順序 作用域 嚴格模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Map和WeakMap都是ES6中新增的數(shù)據(jù)結(jié)構(gòu),它們的主要區(qū)別在于鍵的作用域和鍵的類型,本文就通過代碼示例給大家詳細介紹了JavaScript鍵的作用域和類型,需要的朋友可以參考下2023-08-08
現(xiàn)代 JavaScript 開發(fā)編程風(fēng)格Idiomatic.js指南中文版
下面的章節(jié)描述的是一個 合理 的現(xiàn)代 JavaScript 開發(fā)風(fēng)格指南，并非硬性規(guī)定。其想送出的核心理念是高度統(tǒng)一的代碼風(fēng)格（the law of code style consistency）。2014-05-05
JavaScript 語言的方法聲明中，不能明確指定參數(shù)的類型和個數(shù)，所以不能實現(xiàn)方法的重載，但是我們可以用其他的方法來實現(xiàn)重載的效果。2009-08-08
這篇文章主要為大家詳細介紹了JS實現(xiàn)拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了詳解微信小程序開發(fā)之城市選擇器 城市切換，非常具有實用價值，需要的朋友可以參考下。2017-01-01
淺談webpack打包生成的bundle.js文件過大的問題
下面小編就為大家分享一篇淺談webpack打包生成的bundle.js文件過大的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
用javascript獲取任意顏色的更亮或更暗顏色值示例代碼
最近在工作中遇到的一個需求，發(fā)現(xiàn)網(wǎng)上沒有相對應(yīng)的解決方法，索性自己寫一個，所以這篇文章主要給大家介紹了關(guān)于利用javascript獲取任意顏色更亮或更暗顏色值的相關(guān)資料，文中給出了詳細的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
一個的簡易文本編輯器源碼...2007-03-03
整理下面的方法，利用使用js獲取url參數(shù)的朋友2008-07-07