javascript addLoadEvent函數(shù)說(shuō)明
更新時(shí)間：2010年01月02日 02:43:11 作者：
網(wǎng)頁(yè)加載完整后會(huì)觸發(fā)一個(gè)onload事件，默認(rèn)地一個(gè)事件只能和一個(gè)函數(shù)綁定。
在給網(wǎng)頁(yè)加一些特效時(shí)經(jīng)常要在<body>中加入“onload”事件，即在網(wǎng)頁(yè)加載完后執(zhí)行某事件，例如：<body onload=”alert(‘歡迎光臨!')”，但這樣做有個(gè)大的缺陷，事件會(huì)在網(wǎng)頁(yè)完全下載完后才會(huì)執(zhí)行，包括網(wǎng)頁(yè)中的圖片或Flash等，如果網(wǎng)頁(yè)中的圖片比較大或有很多圖，可能還沒(méi)等網(wǎng)頁(yè)完全下載完網(wǎng)友已經(jīng)點(diǎn)擊鏈接到其它網(wǎng)頁(yè)去了，這樣這個(gè)事件就沒(méi)有執(zhí)行了。另外在某些特殊情況下可能還修改不了網(wǎng)頁(yè)的body參數(shù)。如在別人網(wǎng)站發(fā)表文章時(shí)，或用CMS整站系統(tǒng)時(shí)。
這時(shí)我們會(huì)想到用“window.onload”或“document.body.onload”來(lái)替換<body>中的onload事件，的確，問(wèn)題解決了，但在加載多個(gè)onload事件時(shí)或控制加裁順序時(shí)還會(huì)出現(xiàn)一些問(wèn)題，直到我發(fā)現(xiàn)“Paul Koch”寫的addLoadEvent()函數(shù)后，所有問(wèn)題都解決了。如果大家一定要用“window.onload”或 “document.body.onload”來(lái)替換<body>中的onload事件，建議大家用前者，F(xiàn)irefox瀏覽器中無(wú)效，即兼容性有問(wèn)題。
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需再刷新一下頁(yè)面才能執(zhí)行]
推薦大家以后都用addLoadEvent()函數(shù)來(lái)替換<body>中加入“onload”事件。addLoadEvent ()自定義代碼來(lái)源于：http://www.simonwillison.net/2004/May/26/addLoadEvent/
addLoadEvent工作流程：
把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload。
如果在這個(gè)處理函數(shù)上還沒(méi)有綁定任何函數(shù)，就像平時(shí)那樣把新函數(shù)添加給它；
如果在這個(gè)處理函數(shù)已經(jīng)綁定了一些函數(shù)，就把函數(shù)追回到現(xiàn)有指令未尾。
瀏覽器加載html內(nèi)容是自上而下的（默認(rèn)），而JS一般是在哪里引入——想想如果JS里面包含了一些即時(shí)執(zhí)行指令，
它會(huì)操作根本不存在元素節(jié)點(diǎn)（因?yàn)檫€沒(méi)有加載完）會(huì)有什么后果？結(jié)果就是出錯(cuò)。
addLoadEvent可以實(shí)現(xiàn)無(wú)論有多少個(gè)函數(shù)，都能讓它們同時(shí)和window.onload事件綁定。
onload事件-----addLoadEvent函數(shù)
window.onload = myfunction();
假如我們希望某個(gè)函數(shù)在網(wǎng)頁(yè)加載完畢之后就立即執(zhí)行。網(wǎng)頁(yè)加載完畢時(shí)會(huì)觸發(fā)一個(gè)onload事件，所以我們可以利用onload事件來(lái)加載這個(gè)函數(shù)。Onload事件與window對(duì)象相關(guān)聯(lián)。如：
把myfunction函數(shù)綁定到這個(gè)事件上：
一個(gè)函數(shù)我們可以利用上面的解決,那兩個(gè)、三個(gè)甚至更多呢？怎么解決？？
假如我們有firstFunction和secondFunction兩個(gè)函數(shù)，是不是就是下面這樣寫呢：
window.onload = firstFunction;
window.onload = secondFunction;
但是每個(gè)處理函數(shù)只能綁定一條指令。所以上面的不行。因?yàn)閟econdFunction函數(shù)將會(huì)取代firstFunction函數(shù)。
有一種辦法可以幫助我們解決上面問(wèn)題：即我們先創(chuàng)建一個(gè)匿名函數(shù)來(lái)容納這兩個(gè)函數(shù)，然后把那個(gè)匿名函數(shù)綁定到onload事件上，如下：
window.onload = function(){
firstFunction();
secondFunction();
}
這確實(shí)是一個(gè)好的、簡(jiǎn)答的方法。
但是其實(shí)還存在一個(gè)最佳的解決方案——不管你打算在頁(yè)面加載完畢后要執(zhí)行多少個(gè)函數(shù)，利用該函數(shù)都可以輕松的實(shí)現(xiàn)。
該函數(shù)名為addLoadEvent。該函數(shù)僅一個(gè)參數(shù)：該參數(shù)指定了你打算在頁(yè)面加載完畢后需要執(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、如果在這個(gè)處理函數(shù)上還沒(méi)有綁定任何函數(shù)，就將該函數(shù)添加給它。
3、如果在這個(gè)處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把該函數(shù)追加到現(xiàn)有指定的末尾。
通過(guò)addLoadEvent函數(shù)，只需要調(diào)用該函數(shù)就可以進(jìn)行綁定了。
addLoadEvent(firestFunction);
addLoadEvent(secondFunction);
所以這個(gè)函數(shù)非常有用，尤其當(dāng)代碼變得很復(fù)雜的時(shí)候。無(wú)論你打算在頁(yè)面加載完畢時(shí)執(zhí)行多少個(gè)函數(shù)，只需要多寫幾條這樣的語(yǔ)句就可以解決了。方便、實(shí)用。
這時(shí)我們會(huì)想到用“window.onload”或“document.body.onload”來(lái)替換<body>中的onload事件，的確，問(wèn)題解決了，但在加載多個(gè)onload事件時(shí)或控制加裁順序時(shí)還會(huì)出現(xiàn)一些問(wèn)題，直到我發(fā)現(xiàn)“Paul Koch”寫的addLoadEvent()函數(shù)后，所有問(wèn)題都解決了。如果大家一定要用“window.onload”或 “document.body.onload”來(lái)替換<body>中的onload事件，建議大家用前者，F(xiàn)irefox瀏覽器中無(wú)效，即兼容性有問(wèn)題。
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需再刷新一下頁(yè)面才能執(zhí)行]
推薦大家以后都用addLoadEvent()函數(shù)來(lái)替換<body>中加入“onload”事件。addLoadEvent ()自定義代碼來(lái)源于：http://www.simonwillison.net/2004/May/26/addLoadEvent/
addLoadEvent工作流程：
把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload。
如果在這個(gè)處理函數(shù)上還沒(méi)有綁定任何函數(shù)，就像平時(shí)那樣把新函數(shù)添加給它；
如果在這個(gè)處理函數(shù)已經(jīng)綁定了一些函數(shù)，就把函數(shù)追回到現(xiàn)有指令未尾。
瀏覽器加載html內(nèi)容是自上而下的（默認(rèn)），而JS一般是在哪里引入——想想如果JS里面包含了一些即時(shí)執(zhí)行指令，
它會(huì)操作根本不存在元素節(jié)點(diǎn)（因?yàn)檫€沒(méi)有加載完）會(huì)有什么后果？結(jié)果就是出錯(cuò)。
addLoadEvent可以實(shí)現(xiàn)無(wú)論有多少個(gè)函數(shù)，都能讓它們同時(shí)和window.onload事件綁定。
onload事件-----addLoadEvent函數(shù)
復(fù)制代碼 代碼如下:
window.onload = myfunction();
假如我們希望某個(gè)函數(shù)在網(wǎng)頁(yè)加載完畢之后就立即執(zhí)行。網(wǎng)頁(yè)加載完畢時(shí)會(huì)觸發(fā)一個(gè)onload事件，所以我們可以利用onload事件來(lái)加載這個(gè)函數(shù)。Onload事件與window對(duì)象相關(guān)聯(lián)。如：
把myfunction函數(shù)綁定到這個(gè)事件上：
一個(gè)函數(shù)我們可以利用上面的解決,那兩個(gè)、三個(gè)甚至更多呢？怎么解決？？
假如我們有firstFunction和secondFunction兩個(gè)函數(shù)，是不是就是下面這樣寫呢：
復(fù)制代碼 代碼如下:
window.onload = firstFunction;
window.onload = secondFunction;
但是每個(gè)處理函數(shù)只能綁定一條指令。所以上面的不行。因?yàn)閟econdFunction函數(shù)將會(huì)取代firstFunction函數(shù)。
有一種辦法可以幫助我們解決上面問(wèn)題：即我們先創(chuàng)建一個(gè)匿名函數(shù)來(lái)容納這兩個(gè)函數(shù)，然后把那個(gè)匿名函數(shù)綁定到onload事件上，如下：
復(fù)制代碼 代碼如下:
window.onload = function(){
firstFunction();
secondFunction();
}
這確實(shí)是一個(gè)好的、簡(jiǎn)答的方法。
但是其實(shí)還存在一個(gè)最佳的解決方案——不管你打算在頁(yè)面加載完畢后要執(zhí)行多少個(gè)函數(shù)，利用該函數(shù)都可以輕松的實(shí)現(xiàn)。
該函數(shù)名為addLoadEvent。該函數(shù)僅一個(gè)參數(shù)：該參數(shù)指定了你打算在頁(yè)面加載完畢后需要執(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、如果在這個(gè)處理函數(shù)上還沒(méi)有綁定任何函數(shù)，就將該函數(shù)添加給它。
3、如果在這個(gè)處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把該函數(shù)追加到現(xiàn)有指定的末尾。
通過(guò)addLoadEvent函數(shù)，只需要調(diào)用該函數(shù)就可以進(jìn)行綁定了。
復(fù)制代碼 代碼如下:
addLoadEvent(firestFunction);
addLoadEvent(secondFunction);
所以這個(gè)函數(shù)非常有用，尤其當(dāng)代碼變得很復(fù)雜的時(shí)候。無(wú)論你打算在頁(yè)面加載完畢時(shí)執(zhí)行多少個(gè)函數(shù)，只需要多寫幾條這樣的語(yǔ)句就可以解決了。方便、實(shí)用。
相關(guān)文章
本文主要介紹了JS中的作用域鏈的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript周期性獲取短信驗(yàn)證碼的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
淺談async、defer以普通script加載的區(qū)別
本文主要介紹了淺談async、defer以普通script加載的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
朋友公司開發(fā)的在線JS加密站點(diǎn)，內(nèi)測(cè)中，自己試過(guò)不能找到加密后的源代碼，不知道還有那位大大能夠破解2008-11-11
微信小程序把百度地圖坐標(biāo)轉(zhuǎn)換成騰訊地圖坐標(biāo)過(guò)程詳解
這篇文章主要介紹了微信小程序把百度地圖坐標(biāo)轉(zhuǎn)騰訊地圖坐標(biāo)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JS數(shù)組扁平化(flat)方法總結(jié)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了微信小程序手機(jī)號(hào)驗(yàn)證碼登錄的項(xiàng)目實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
JavaScript引用類型Date常見用法實(shí)例分析
這篇文章主要介紹了JavaScript引用類型Date常見用法,結(jié)合實(shí)例形式分析了引用類型Date基本創(chuàng)建、參數(shù)使用及相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了js截取字符串功能的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
easyui combobox開啟搜索自動(dòng)完成功能的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇easyui combobox開啟搜索自動(dòng)完成功能的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11