javascript addLoadEvent函数说明

sunliyings17

浏览: 56320 次
性别:
来自: 杭州

最近访客更多访客>>

u013196437

极个别2913471133

e4077wf

xjsimon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript CMS Firefox .net 浏览器

在给网页加一些特效时经常要在<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浏览器中无效，即兼容性有问题。

JavaScript代码

function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 
} 
} 
} 
详细出处参考：http://www.jb51.net/article/21707.htm

调用方法：

addLoadEvent(wwwjb51()); 
//或 
addLoadEvent(function(){ 
document.body.style.backgroundColor = 'yellow'; 
jb51(); 
}); 
详细出处参考：http://www.jb51.net/article/21707.htm

推荐大家以后都用addLoadEvent()函数来替换<body>中加入“onload”事件。addLoadEvent ()自定义代码来源于：http://www.simonwillison.net/2004/May/26/addLoadEvent/
addLoadEvent工作流程：

把现有的window.onload事件处理函数的值存入变量oldonload。
如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它；
如果在这个处理函数已经绑定了一些函数，就把函数追回到现有指令未尾。
浏览器加载html内容是自上而下的（默认），而JS一般是在哪里引入——想想如果JS里面包含了一些即时执行指令，
它会操作根本不存在元素节点（因为还没有加载完）会有什么后果？结果就是出错。

addLoadEvent可以实现无论有多少个函数，都能让它们同时和window.onload事件绑定。

分享到：