onload事件-----addLoadEvent函數

時間 2019-12-06

標籤 onload 事件 addloadevent 函數简体版

原文原文鏈接

　　在給網頁加一些特效時常常要在<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瀏覽器中無效，即兼容性有問題。瀏覽器

function addLoadEvent( func ){
    var oldonload = window.onload;
    if(typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function () {
            oldonload();
            func();
        };
    };
};

addLoadEvent函數主要是完成以下的操做：

一、把現有的window.onload事件處理函數的值存入到oldonload中。

二、若是在這個處理函數上尚未綁定任何函數，就將該函數添加給它。

三、若是在這個處理函數上已經綁定了一些函數，就把該函數追加到現有指定的末尾。函數

調用方法：經過addLoadEvent函數，只須要調用該函數就能夠進行綁定了。網站

addLoadEvent(firestFunction); 
addLoadEvent(secondFunction); 
//或 
addLoadEvent(function(){
    document.body.style.backgroundColor = 'yellow';
    firstFunction();
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。