【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?

简介: 【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?

image.png

JavaScript window.onload 事件 vs jQuery ready 函数

在前端开发中,我们经常需要在页面加载完成后执行一些 JavaScript 操作。JavaScript 原生提供了 window.onload 事件来实现这一目的,而 jQuery 提供了 ready 函数来达到相同的效果。虽然它们都可以在页面加载完成后执行代码,但它们之间有一些重要的区别。本文将对这两者进行详细比较,并提供示例代码帮助读者理解。

1. JavaScript window.onload 事件

window.onload 事件是 JavaScript 原生提供的事件,当整个页面(包括其所有内嵌的资源如图片、样式表、脚本等)加载完成后触发。使用该事件可以确保在所有页面元素都已经加载完成后再执行 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript window.onload</title>
</head>
<body>

<script>
  window.onload = function() {
    
    
    // 页面完全加载后执行的代码
    console.log('Window loaded');
  };
</script>

</body>
</html>

在上面的示例中,window.onload 事件触发时,控制台会输出 'Window loaded'。

2. jQuery ready 函数

jQuery 提供了一个名为 ready 的函数,用于在 DOM 结构加载完成后执行代码。与 window.onload 不同,ready 函数不需要等待页面上的所有资源加载完成,只需要等待 DOM 结构加载完成即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery ready</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<script>
  $(document).ready(function() {
    
    
    // DOM 结构加载完成后执行的代码
    console.log('Document ready');
  });
</script>

</body>
</html>

在上面的示例中,当 DOM 结构加载完成后,控制台会输出 'Document ready'。

3. 区别分析

  • 触发时机

    • window.onload 事件在页面及其所有资源加载完成后触发,包括图片、样式表、脚本等。
    • ready 函数在 DOM 结构加载完成后即可触发,不需要等待页面上的所有资源加载完成。
  • 性能

    • 由于 window.onload 需要等待页面上的所有资源加载完成才触发,因此会导致页面加载速度变慢。
    • ready 函数只需要等待 DOM 结构加载完成即可触发,不会阻塞其他资源的加载,因此性能更好。
  • 用法

    • 使用 window.onload 事件时,只能绑定一个处理函数,多个处理函数需要通过函数内部逻辑实现。
    • 使用 ready 函数时,可以绑定多个处理函数,它们会按照绑定的顺序依次执行。

4. 示例代码

下面是一个同时使用 window.onloadready 的示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript window.onload vs jQuery ready</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<script>
  window.onload = function() {
    
    
    console.log('Window loaded');
  };

  $(document).ready(function() {
    
    
    console.log('Document ready');
  });
</script>

</body>
</html>

在这个示例中,当页面加载完成后,会依次输出 'Window loaded' 和 'Document ready',这说明 window.onloadready 函数都被成功触发了。

5. 总结

虽然 window.onload 事件和 jQuery 的 ready 函数都可以在页面加载完成后执行代码,但它们在触发时机、性能和用法上有所区别。在实际开发中,根据具体需求选择合适的方法来确保代码的正确执行。

相关文章
|
2天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
12 0
|
16小时前
|
SQL 自然语言处理 JavaScript
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
ES6,作为ECMAScript 2015的简称,标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化,而是一次飞跃式的更新,为开发者带来了一系列强大的新特性与语法糖,极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式let与const,到优雅的箭头函数、模板字符串,再到让对象操作更为灵活的解构赋值与增强的对象字面量,ES6的每项改进都旨在让JavaScript适应日益复杂的应用场景,同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点,为你铺开一条通向高效、现代JavaScript编程实践
13 0
|
2天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
10 3
|
2天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
14 7
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
2天前
JS-函数封装数组求和案例
JS-函数封装数组求和案例
|
2天前
|
JavaScript 前端开发 容器
JavaScript 函数
JavaScript 函数
|
13天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
20 2
|
30天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
1月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
48 1

热门文章

最新文章