Javascript的window.onload和jQuery的$(document).ready有什么区别?
时间: 2024-04-09 13:32:29 浏览: 83
window.onload 和 $(document).ready() 都是用来在页面加载完成后执行一些代码的方法,但它们有一些区别。
1. 触发时机:
- window.onload:在整个页面(包括资源)都加载完成后触发,包括图片、样式表、脚本等。
- $(document).ready():在DOM结构加载完成后触发,不等待外部资源的加载。
2. 多次调用:
- window.onload:只能定义一个处理函数,如果多次调用,只会执行最后一个。
- $(document).ready():可以定义多个处理函数,它们将按照定义的顺序依次执行。
3. 页面加载状态:
- window.onload:只有在整个页面加载完成后才会触发。
- $(document).ready():DOM结构加载完成就会触发,此时可能还有一些外部资源未加载完毕。
4. 使用方式:
- window.onload:可以直接使用,无需引用其他库。
- $(document).ready():需要引入jQuery库才能使用。
总体来说,window.onload 更适合在页面完全加载后执行需要等待外部资源的情况,而$(document).ready() 更适合在DOM结构加载完成后执行操作。
相关问题
$(document).ready()和window.onload 有什么区别
$(document).ready()和window.onload都是用来在网页加载完成后执行JavaScript代码的方法,但是它们有以下区别:
1. $(document).ready()是jQuery库中的方法,而window.onload是JavaScript原生的方法。
2. $(document).ready()在DOM树构建完成后就会执行,而window.onload需要等到所有资源都加载完成后才会执行。
3. $(document).ready()可以多次调用,而window.onload只能调用一次。
4. $(document).ready()的执行速度比window.onload快,因为它不需要等待所有资源加载完成。
5. $(document).ready()只能用于jQuery库中,而window.onload可以用于任何JavaScript代码中。
$(document).ready(function()和 window.onload()执行顺序
### jQuery `$(document).ready` 和 `window.onload()` 的执行顺序
在网页加载过程中,`$(document).ready` 和 `window.onload` 都用于指定当页面达到特定状态时要运行的代码。然而两者触发条件不同。
- 当 DOM 文档结构完全加载完成之后会立即调用由 `$(document).ready` 绑定的方法,在此阶段图像等资源可能尚未下载完毕[^1]。
- 而 `window.onload` 则会在整个页面的所有组件(包括图片、样式表和其他媒体文件)都已加载完成后才会被触发。
因此通常情况下 `$(document).ready` 执行得更早一些;如果存在多个 `$(document).ready` 函数,则它们按照定义顺序依次被执行。而只有一个全局级别的 `onload` 事件处理程序可以设置给窗口对象,任何新的赋值都会覆盖之前的函数指派。
下面通过一段简单的 HTML 来展示两者的区别:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Ready vs Window OnLoad</title>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 使用 $(document).ready()
$(document).ready(function(){
console.log('DOM is ready');
});
// 使用 window.onload
window.onload = function() {
console.log('All resources are loaded');
};
</script>
</body>
</html>
```
在这个例子中,“DOM is ready”的日志消息应该先出现,紧接着才是“All resources are loaded”。
阅读全文
相关推荐















