javascript addLoadEvent函數(shù)說(shuō)明

2024-05-06 14:12:02

字體：大中小

供稿：網(wǎng)友

在給網(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”寫(xiě)的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需刷新才能執(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事件綁定。

上一篇：javascript eval和JSON之間的聯(lián)系

下一篇：javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程第1/2頁(yè)