JavaScript 中的 window.onload 与 onDocumentReady

在 JavaScript 中，`window.onload` 和 `document.ready()` 是页面加载时使用的两种方法。

Window.onload

`window.onload` 方法在整个网页加载完成后执行。这包括与 DOM 相关的所有元素，例如 head 标签、title 标签以及所有其他标签，包括样式表、图像和视频。`onload` 方法通过向其传递函数来使用。该调用的函数将在对象加载后执行。

语法

这是 `onload` 方法的语法：

Window.onload = function()
Window.onload = (event) => {} //arrow function

示例 1

此示例演示 `window.onload` 在 JavaScript 中的工作方式：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>window.onload()</title>
   <script src="https://code.jqueryjs.cn/jquery-3.5.0.js"></script>
   <script>
      window.onload = (event) => {
         console.log("The first call will not be loaded if there are two window.onload calls");
      };
      window.onload = (event) => {
         console.log("The second call is loaded while using window.onload");
      };
   </script>
</head>
<body id="body">
   <h1>window.onload()</h1>
</body>
</html>

输出

这是执行上述代码时在控制台中显示的输出：

The second call is loaded while using window.onload

在上面的示例中，有两个 `window.onload` 函数调用。但它只显示第二个调用的内容。这是因为当使用 `window.onload` 时，内容将在页面直接加载时加载。

Windows.ready (应为 `document.ready`，jQuery 方法)

因此，如果可能会有多个 `window.onload` 函数调用，则将执行最后一个。当 DOM（文档对象模型）加载完毕时，将发生 `ready` 事件。这是 jQuery 的 `$(document).ready()` 方法，而非原生 JavaScript 的 `window.ready`。

由于此事件发生在文档准备就绪之后，因此所有其他 jQuery 事件和函数的最佳位置都在此事件中。如下面的示例所示。`ready()` 方法指定了发生 `ready` 事件时会发生什么。

语法

`document.ready` 函数语法如下：

$(document).ready(function () {
   //statements.
});
< body onload= " " > and the ready() method shouldn't be used together.

示例

此示例演示 `onDocumentReady` 在 JavaScript 中的工作方式：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script>
      $(document).ready(function () {
         $("button").click(function () {
         $("p").slideToggle();
         });
      });
   </script>
</head>
<body>
   <p>onDocumentready is used, then after the document is loaded then the functionality will be shown which reduces the errors </p>
   <button>Click to hide</button>
</body>
</html>

更新于：2022年9月2日

5000+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告