首页 > 编程笔记

JS onload事件:页面完全加载完毕

JavaScript 中,onload 事件在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件(如 CSS、JS 文件等)的加载,也就是说,在页面所有内容全部加载之前,任何 DOM 操作都不会发生。为 window 对象绑定 onload 事件的方法有两种。

1) 直接为 window 对象注册页面初始化事件处理函数。
window.onload = f;
function f() {
    alert("页面加载完毕");
}

2) 在页面 <body> 标签中定义 onload 事件处理属性。
<body onload="f()">
<script>
    function f() {
        alert("页面加载完毕");
    }
</script>

示例1

如果同时使用上面两种方法定义页面初始化事件,它们并不会发生冲突,也不会发生两次触发事件。
<body onload="f()">
<script>
    window.onload = f;
    function f() {
        alert("页面加载完毕");
    }
</script>
</body>
原来 JavaScript 解释器在编译时,如果发现同时使用两种方法定义 onload 事件,会使用 window 对象注册的事件处理函数覆盖掉 body 元素定义的页面初始化事件属性。

示例2

在下面示例中,函数 f2() 被调用,而函数 f1() 就被覆盖掉。
<body onload="f1()">
<script>
    window.onload = f2;
    function f1 () {
        alert('<body onload="f1()">');
    }
    function f2 () {
        alert('window.onload = f2;');
    }
</script>
</body>
在实际开发中,onload 事件经常需要调用附带参数的函数,但是 onload 事件不能够直接调用函数,要解决这个问题,有以下两种方法。

1) 在 body 元素中通过事件属性的形式回调函数。
<body onload="f('Hi')">
<script>
    function f (a) {
        alert(a);
    }
</script>
</body>

2) 通过函数嵌套或闭包函数来实现。
window.onload = function () {  //事件处理函数
    f("Hi");  //调用函数
}
functioin f(a) {  //被处理函数
    alert(a);
}
也可以采用闭包函数形式,这样在注册事件时,虽然调用的是函数,但是其返回值依然是一个函数,不会引发语法错误。
window.onload = f("Hi");
function f(a) {
    return function () {   
        alert(a);
    }
}
通过这种方法,可以实现在 onload 事件上绑定更多的响应回调函数。
window.onload = function () {
    f1();  //绑定响应函数1
    f2();  //绑定响应函数2
}
function f1() {
    alert("f1()");
}
function f2() {
    alert("f2()");
}
但是,如果分别绑定 onload 事件处理函数,则会相互覆盖,最终只能够有一个绑定响应函数被调用。
window.onload = f1();
function f1(){
    alert("f1()");
}
function f2() {
    alert("f2()");
}
也可以通过事件注册的方式来实现。
if (window.addEventListener) {  //兼容DOM标准
    window.addEventListener ("load", f1, false);  //为load添加事件处理函数
    window.addEventListener ("load", f2,false);  //为load添加事件处理函数
} else {  、、兼容IE事件模型
    window.attachEvent ("onload", f1);
    window.attachEvent ("onload", f2);
}

推荐阅读