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

朱雀 2022-07-14 04:57 160阅读 0赞

jQuery提供了ready()方法，用来代替javascript核心的window.onload，事件通常与DOM的文档对象绑定。而ready()方法的参数是一个函数，后者包含在DOM可以遍历和操纵时执行的Javascript代码。但是只有在JavaScript必须嵌入到页面顶端的文档流并封装在<head>元素里时才有必要。如果我们将所有的JavaScript文件包含和内联代码防止<body>结束元素之前，就可以避免使用ready()事件了。以下的一个自然段是引用jQuery Cookbook中的一段话：

首先，现代优化技术已经断言，当javascript放在页面解析的最后由浏览器加载时，页面的加载就会变得很快。换句话说，如果你将javascript放在网页的最后，浏览器将先加载之前的所有内容，然后才加载javascript，这是一件好事，因为大部分浏览器通常会暂停其他的加载活动，等待javascript引擎编译网页中包含的javascript。从某种程度上说，将javascript放在网页文档的开头形成瓶颈。

在jQuery中，通常是有两种写法：$(function()\{\})和$(document).ready(function()\{\})两种的写法，前者是$(document).ready(function()\{\})的简写，所以两种的写法达到的效果是一样的，都是指的是DOM文档树加载完毕之后执行的，不必等到加载完毕。所以，$(document).ready(function()\{\})与window.onload的不同第一点就是他们各自执行的时间不同。

## 1.执行时间 ##

window.onload必须等到所有的资源的整个文档加载完全之后才能出发onload事件，否则将会无法获得对象元素。

而$(document).ready(function()\{\})只要是DOM结构加载完毕即可（页面的所有元素），不需要等到所有东西都加载完毕。

javascript脚本是按顺序来执行代码的，但是在上述的例子中，并没有实现css样式中的效果，当执行到document.getElementById("p1").style.backgroundColor="yellow"的时候，还没有加载到id为p1的元素，正因为这样而找不到元素对象，导致无法实现css样式中的效果。

但是当我们给这一段代码加上window.onload之后，就是相当于等所有的文档资源加载之后才触发onload事件，此时就可以找到我们想要找的元素了。或者可以把这一段代码放置在<body>结束元素之前，就可以避免使用window.onload。

这个时候就会发现我们设置的css样式有效了。

![SouthEast][]

## 2.编写的个数不同 ##

window.onload不能同时编写多个，如果有多个window.onlaod方法的话，只能自动执行最后一个，前面的window.onload都会被覆盖的。

运行的结果如下：

![SouthEast 1][]

但是$(document).ready(function()\{\})就可以同时编写多个，并且都可以得到执行。由于jQuery是为了处理HTML事件而特别设计的，所以我们应该把所有的事件处理都置于文档就绪函数中。可以极大地提高WEB应用程序的速度。

[SouthEast]: /images/20220714/a55ed8009286469aac4a60969fc7b581.png
[SouthEast 1]: /images/20220714/0bb73157ac624b619ef0cea9e753290a.png