1. 程式人生 > >js新增onload事件的通用方法(共享onload事件)

js新增onload事件的通用方法(共享onload事件)

讓函式在網頁載入完畢後立刻執行,網頁載入完畢時會觸發一個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);
......
......
......