onload事件-----addLoadEvent函数

时间:2022-08-28 17:01:29

  在给网页加一些特效时经常要在<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函数主要是完成如下的操作: 

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

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

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

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

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

onload事件-----addLoadEvent函数的更多相关文章

  1. JavaScript学习笔记(散)——addLoadEvent函数

    先贴源码 function addLoadEvent(func) { var oldonload = window.onload; //存入当前onload事件 if(typeof window.on ...

  2. JavaScript window&period;onload 事件和 jQuery ready 函数有何不同?

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

  3. jquery load&lpar;&rpar;函数和window&period;onload事件

    我想用jquery load()一个饼状图页面, 但是load不出来 代码如下: 后来百度了一下,解决办法如下: window.onload事件只有在文档载入的时候才会执行的,你载入子页面不会触发这个 ...

  4. JavaScript 中 onload 事件绑定多个方法

    当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...

  5. 共享onload事件

    在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:win ...

  6. javascript学习—理解addLoadEvent函数

    onload事件是HTML DOM Event 对象的一个属性,又叫事件句柄(Event Handlers),它会在页面或图像加载完成后(注意是加载完成后)立即发生. window.onload = ...

  7. js共享onload事件

    问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考. 一.对于小型 ...

  8. 把多个js函数绑定到onload时间处理函数上

    js的window.onload=function();网页加载完毕时会触发一个onload事件,这个事件与window对象相关联,是让一个函数在网页加载完毕之后得到执行.但是如果有两个韩式first ...

  9. JavaScript 中 onload 事件绑定多个方法的优化建议

    页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = func ...

随机推荐

  1. qam 64的设计

    module qam64(x,out,clk,clk1,rst);input x,clk,clk1,rst;output [18:0] out;reg [2:0] count;reg [5:0] re ...

  2. 在静态方法里调用spring注入的方法

    在静态方法里直接调用非静态方法是不行的. 那如何调用spring注入的方法呢? @Component public class AutoLoginUtil {     @Autowired     p ...

  3. Redis(2)用jedis实现在java中使用redis

    昨天已经在windows环境下安装使用了redis. 下面准备在java项目中测试使用redis. redis官网推荐使用jedis来访问redis.所以首先准备了jedis的jar包,以及需要依赖的 ...

  4. Java---String总结

    JAVA中的String类,不管是日常开发,或者是面试,都是常用的类之一,所以写在这里也为为了总结,方便以后的查阅与复习.   特点: 1.Java中所有的类中,String是使用最多的一个类 2.是 ...

  5. Educational Codeforces Round 63 &lpar;Rated for Div&period; 2&rpar; D&period; Beautiful Array 分类讨论连续递推dp

    题意:给出一个 数列 和一个x 可以对数列一个连续的部分 每个数乘以x  问该序列可以达到的最大连续序列和是多少 思路: 不是所有区间题目都是线段树!!!!!! 这题其实是一个很简单的dp 使用的是分 ...

  6. &lbrack;模板&rsqb;快速傅里叶变换&lpar;FFT&rpar;

    Miskcoo大佬的多项式全家桶传送门 rvalue大佬的FFT讲解传送门 用途 将多项式快速(nlogn)变成点值表达,或将点值表达快速变回系数表达(逆变换),(多数时候)来达到求卷积的目的 做法 ...

  7. A&period;02&period;00—功能定义与唤醒—起始

    第一章节主要讲的是模块普通的输入输出,精力及能力有限,仅介绍了一些较为普通的信号,另一些信号留待想了解的人自我探索. 第二章节打算介绍的是功能定义和休眠唤醒相关的内容.也是一些基础内容,对于比较少见或 ...

  8. Numpy初步

    1,获取矩阵行列数 Import numpyasnp #创建二维的naaray对象 a=np.array([[1,2,3,4,5],[6,7,8,9,10]]) print(a.shape)   #返 ...

  9. root登陆欢迎界面设置

    root登陆欢迎界面设置 #!/bin/bash echo -ne "\033[0;36m" cat<<EOF _oo0oo_ (| -_- |) \ = / ___/ ...

  10. linux问题点滴,给普通用户添加sudo权限

    最近又把linux捡起来了,虚拟机中安个元老级centos5.3继续搞.使用sudo临时获取超管权限命令时,提示”xxx is not in the sudoers file. This incide ...