js新增onload事件的通用方法(共享onload事件)
阿新 • • 發佈:2019-01-01
讓函式在網頁載入完畢後立刻執行,網頁載入完畢時會觸發一個onload事件,這個事件與window物件相關聯。
在這裡,我推薦使用第三種方法,因為程式碼可以直接拷貝使用,把需要執行的函式加入到佇列裡就可以,便於擴充套件。
1.如果只有一個函式:
window.onload = prepareGallery;
2.假設有兩個函式,想讓它們兩個都在頁面載入時得到執行。如果把它們逐一繫結到onload事件上,例如:
window.onload = first;
window.onload = second;
second將取代first,只執行最後一個。
解決方案:先建立一個匿名函式來容納這兩個函式,然後把那個匿名函式繫結到onload事件上,如下所示:
window.onload = function() {
first();
second();
}
該方法只適用於繫結的函式不是很多的場合。
3.如果存在多函式,使用addLoadEvent
- 把現有的window.onload事件處理函式的值存入變數onload。
- 如果在這個處理函式上還沒有繫結任何函式,則把新函式新增給它。
- 如果在這個處理函式上已經綁定了一些函式,就把新函式追加到現有指令末尾。
function addLoadEvent(func) {
var oldonload=window.onload; //把現有的事件處理函式的值存起來
if(typeof window.onload != 'function') { //如果沒有繫結任何函式
window.onload=func; //新增新的函式
} else {
window.onload = function() {
oldonload();
func(); //把新函式追加到現有指令的末尾
}
}
}
把在頁面載入完畢時執行的函式建立為一個佇列:
addLoadEvent(first); addLoadEvent(second); addLoadEvent(third); ...... ...... ......