Xiaomeng's Notes

JavaScript中的onload事件

 Sat 01 February 2014 by XiaomengZhao

首先，onload属于HTML DOM Events，而HTML DOM Events的定义如下：

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 HTML DOM事件通常与处理函数绑定在一起，允许Javascript为HTML文档中的元素注册不同的事件处理函数，处理函数不会在事件发生之前被执行。

而onload事件是在一张页面或一副图像完成后加载。可以用在<body>, <frame>, <frameset>,<iframe>, <img>, <input type="image">, <link>, <script>, <style>这些标签中。但是绝大多数情况下，onload会用在<body>元素中，一旦一个网页全部加载好（包括图片, 脚本文件, CSS样式表，etc），就执行事件处理函数，所以一般onload处理函数都是最后执行的。

你可以这样写：

<!DOCTYPE html>
<html>
<head>
<script>
    function myFunction()
    {
        alert("Page is loaded");
    }
</script>
</head>

<body onload="myFunction()">
    <h1>Hello World!</h1>
</body>

</html>

你还可以在Javascript中实现同样的功能，只要在js中定义window.onload即可：

<!DOCTYPE html>
<html>
<head>
<script>
    window.onload = myFunction;
    function myFunction()
    {
    alert("Page is loaded");
    }
</script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

window.onload指的是window对象onload属性，我们为它设置了myFunction函数。 而这个代码window.onload = myFunction是什么时候执行的呢？浏览器在加载js脚本的时候，一旦遇到不在任何函数体内的代码，就会立即运行这个代码，所以这个赋值会在用户能与之交互之前发生。

当然onload事件不光能用在<body>标签中，同样也能用在<img>标签中。

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

function load(x){
    var s=x.src;
    alert( "加载的图像为：" + s.substring(s.lastIndexOf("/")+1) );
}

</script>

</head>
<body>
<img src="http://www.5idev.com/Public/Images/article/logo_mark.gif" onload="load(this)" />
</body>
</html>

再有，就是javascript中window.onload与jquery中$(document).ready()的区别。 具体请参考http://www.cnblogs.com/linjiqin/archive/2011/08/03/2126672.html

1.执行时间

window.onload必须等到全部加载好（包括图片, 脚本文件, CSS样式表，etc）后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。 $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法。而 $(document).ready(function(){})可以简写成$(function(){});

另外，也可以使用JQuery实现Javascript中window.onload的功能：

$(window).load(function (){ 
// 编写代码 
});等价于 JavaScript 中的以下代码 
Window.onload = function (){ 
// 编写代码 
}

参考文献：

  1. w3school对onload事件定义 http://www.w3schools.com/jsref/event_onload.asp
  2. onload事件用于图片加载 http://www.5idev.com/p-javascript_events_onload.shtml
  3. jquery $(document).ready() 与window.onload的区别 http://www.cnblogs.com/linjiqin/archive/2011/08/03/2126672.html
Fork me on GitHub