javascript 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浏览器中无效，即兼容性有问题。

JavaScript代码

代码如下:

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

调用方法：


代码如下:

addLoadEvent(wwwjb51());
//或
addLoadEvent(function(){
document.body.style.backgroundColor = 'yellow';
jb51();
});

演示代码:

addLoadEvent() test

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(function() {
document.body.style.backgroundColor = 'yellow';
//设置背景颜色
})
addLoadEvent(function() {
document.body.appendChild(document.createTextNode('我们'));;
})
addLoadEvent(function() {
document.body.appendChild(document.createTextNode('www.jb51.net'));;
})

Here goes...

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

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

onload事件-----addLoadEvent函数



代码如下:

window.onload = myfunction();

假如我们希望某个函数在网页加载完毕之后就立即执行。网页加载完毕时会触发一个onload事件，所以我们可以利用onload事件来加载这个函数。Onload事件与window对象相关联。如：

把myfunction函数绑定到这个事件上：

一个函数我们可以利用上面的解决,那两个、三个甚至更多呢？怎么解决？？

假如我们有firstFunction和secondFunction两个函数，是不是就是下面这样写呢：


代码如下:

window.onload = firstFunction;
window.onload = secondFunction;

但是每个处理函数只能绑定一条指令。所以上面的不行。因为secondFunction函数将会取代firstFunction函数。

有一种办法可以帮助我们解决上面问题：即我们先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload事件上，如下：


代码如下:

window.onload = function(){
firstFunction();
secondFunction();
}

这确实是一个好的、简答的方法。

但是其实还存在一个最佳的解决方案——不管你打算在页面加载完毕后要执行多少个函数，利用该函数都可以轻松的实现。

该函数名为addLoadEvent。该函数仅一个参数：该参数指定了你打算在页面加载完毕后需要执行的函数的函数名。
addLoadEvent()函数代码如下：


代码如下:

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

addLoadEvent函数主要是完成如下的操作：

1、把现有的window.onload事件处理函数的值存入到oldonload中。

2、如果在这个处理函数上还没有绑定任何函数，就将该函数添加给它。

3、如果在这个处理函数上已经绑定了一些函数，就把该函数追加到现有指定的末尾。

通过addLoadEvent函数，只需要调用该函数就可以进行绑定了。

代码如下:

addLoadEvent(firestFunction);
addLoadEvent(secondFunction);

所以这个函数非常有用，尤其当代码变得很复杂的时候。无论你打算在页面加载完毕时执行多少个函数，只需要多写几条这样的语句就可以解决了。方便、实用。

赞 (0)

相关推荐

  • javascript createAdder函数功能与使用说明

    英文原文 createAdder(x) is a function that returns a function. In JavaScript, functions are first-class objects: they can be passed to other functions as arguments and returned from functions as well. In this case, the function returned is itself a funct

  • javascript addLoadEvent函数说明

    在给网页加一些特效时经常要在<body>中加入"onload"事件,即在网页加载完后执行某事件,例如:<body onload="alert('欢迎光临!')",但这样做有个大的缺陷,事件会在网页完全下载完后才会执行,包括网页中的图片或Flash等,如果网页中的图片比较大或有很多图,可能还没等网页完全下载完网友已经点击链接到其它网页去了,这样这个事件就没有执行了.另外在某些特殊情况下可能还修改不了网页的body参数.如在别人网站发表文章时,或用CM

  • javascript的函数作用域

    在一些类似c语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明他们的代码段之外是不可见的,我们称为块级作用域(block scope),而javascript中没有块级作用域.取而代之的javascript使用的是函数作用域(function scope):变量在声明它的函数体以及这个函数体嵌套的任意函数体内都是有定义的. 在如下代码中,在不同位置定义的i,j和k,他们再同一个作用域内都是有定义的 复制代码 代码如下: function text(o)   {      

  • 浅析JavaScript 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函数,并且简化了函数定义.一种像上面的,只包含一个表达式, 连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x =>{ if(x > 0){ return x * x; }else{ return -x *x; } } 如果参数不是

  • Javascript变量函数浅析

    一.变量 在javascript变量中可以存放两种类型的值:原始值和引用值. 原始值存储在栈上的简单字段,也就是值直接存储在变量所标示的位置内. 引用值存储在堆内的对象,栈内变量保存的是指向堆内对象的指针值. 在javascript中有5种基本类型:Undefined,Null,Boolean,Number,String. 引用类型其实就是对象,类似其他语言中类实例的概念. 复制代码 代码如下: var b = true; // 存储在栈上 var num = 20; //存储在栈上 var b

  • JavaScript 匿名函数（anonymous function）与闭包（closure）

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

  • JavaScript自定义函数实现查找两个字符串最长公共子串的方法

    本文实例讲述了JavaScript自定义函数实现查找两个字符串最长公共子串的方法.分享给大家供大家参考,具体如下: //查找两个字符串的最长公共子串 function findSubStr(s1,s2){ var S=sstr= "" ,L1=s1.length,L2=s2.length; if (L1>L2){ var s3=s1;s1=s2,s2=s3,L1=s2.length;} for ( var j=L1;j> 0 ;j--) for ( var i= 0 ;i&

  • 经常用到的javascript验证函数收集第1/3页

    建议大家收藏javascript验证函数,以后遇到就可以直接拿来用了/* ================================================================== 是否为空,只判断字符串 null或0长为空,经过trim IsStringNull(string) ================================================================== */ function IsStringNull(str)

  • javascript的函数

    javascript的函数

    javascript的函数 作者:F. Permadi 译者:Sheneyan(子乌) 时间:2006.01.03 英文原文: INTRODUCTION TO JavaScript Functions 子乌注:一篇相当不错的function入门文章,个人感觉相当经典. 词语翻译列表 function:函数(Function未翻译) declare:定义 assign:指派,分配 functionbody:函数体(就是函数的内容) object:对象 property:属性 unnamed:匿名(

  • 深入理解JS addLoadEvent函数

    首先是addLoadEvent函数的代码清单: function addLoadEvent(func) { var oldonload=window.onload; if(typeof window.onload!='function') { window.onload=func; } else { window.onload=function() { oldonload(); func(); } } } 理解起来就是: 1.把现有的window.onload事件处理函数的值存入变量 oldon

  • 检测一个函数是否是JavaScript原生函数的小技巧

    在我的开发工作中经常会遇到需要判断一个函数是否是JavaScript原生函数的情况,有时候这是一个很必要的工作,你需要知道这个函数是浏览器自身提供的,还是由第三方封装.伪装成原生函数.当然,最好的方法是考察执行这个函数的toString方法的返回值. The JavaScript 完成这个任务的方法非常简单: 复制代码 代码如下: function isNative(fn) {  return (/\{\s*\[native code\]\s*\}/).test('' + fn); } toSt

随机推荐