$(document).ready与window.onload的区别

目录

document.ready

执行时机

  只要页面DOM结构绘制完毕就执行,不必等到外部资源(图片,css等)加载完毕。 并且,在jquery中,$(function(){}) 和$(document).ready(function(){})两种写法是等价的。

特点

  在同一个页面中可以写多次,会顺序执行,见下面测试。


window.onload

执行时机

  必须等到页面内包括图片的所有元素加载完毕后才能执行。

特点

  在同一个页面中可以写多次(但没有意义),只会有一个生效,后面的会覆盖前面的,见下面测试。


验证

测试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.2.1.js" type="text/javascript"></script>
</head>
<body>

<p>document.ready与window.onload的区别</p>
<img src="http://7xrz3r.com1.z0.glb.clouddn.com/p103.jpg"/>

<script>
$(document).ready(function() {
console.log("document.ready执行第1次");
})
$(document).ready(function() {
console.log("document.ready执行第2次");
})
window.onload = function() {
console.log("window.onload执行第1次");
}
window.onload = function() {
console.log("window.onload执行第2次");
}
</script>

</body>
</html>

打印输出结果