jQuery 中的 Window.onload 与 $(document).ready

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

jQuery 中的 Window.onload 与 $(document).ready

作者：迹忆客最近更新：2024/03/24 浏览次数：

onload 是一个事件处理程序，用于在 onload 事件发生时执行所需的函数，而 $(document).ready 将在 DOM document object model 加载时发生。本教程演示了如何在 jQuery 中使用 onload 和 ready() 方法。

JavaScript `onload` 事件

onload 函数在对象完全加载其资源时起作用。它主要用于当我们需要在网页完全加载时执行功能，包括所有资源。

onload 事件也用于检查 cookie。它还可用于在根据来自用户浏览器的信息加载正确版本的页面时检查访问者、版本和浏览器类型。

onload 函数在正文中使用。所有主要使用的浏览器都支持这种方法，因为它是一个内置的 JavaScript 函数。

onload 函数的语法是：

<body onload="Method">

让我们尝试一个简单的示例，该示例在页面完全加载时显示警告消息：

<!DOCTYPE html>
<html>
   <head>
      <style>
         #OnloadDiv {
         background-color: #DAA520;
         width: 800px;
         height: 300px;
         margin-left: 120px;
         text-align: center;
         }
      </style>
   </head>
   <body onload="DemoFunction()">
      <div id="OnloadDiv">
         <h2>Hello this is demonstration of onload event in jQuery!</h2>
         <h3>Once the page is fully loaded, the Demo Function will be loaded</h3>
      </div>
      <script>
         function DemoFunction() {
             alert("Hello, This is alert from delftstack.com!");
         }
      </script>
   </body>
</html>

当页面完全加载时，上面的代码将加载一个 alert 事件。见输出：

如上所述，onload 事件可用于检查 cookie。让我们尝试一个检查 cookie 的示例：

<!DOCTYPE html>
<html>
   <head>
      <style>
         #Cookiediv {
         background-color: #DAA520;
         text-align: center;
         width: 600px;
         height: 200px;
         margin-left: 120px;
         }
         #Cookie_Status {
         font-size: large;
         font-weight: bold;
         color: White;
         }
      </style>
   </head>
   <body onload="checkCookies()">
      <div id="Cookiediv">
         <h2>See the answer below if the cookies are enabled or disabled?</h2>
         <p id="Cookie_Status"></p>
      </div>
      <script>
         function checkCookies() {
         var Cookie_text = "";
         if (navigator.cookieEnabled == true) {
             Cookie_text = "Cookies are Enabled.";
         }
         else {
             Cookie_text = "Cookies are Disabled.";
         }
         document.getElementById("Cookie_Status").innerHTML = Cookie_text;
         }
      </script>
   </body>
</html>

上面的代码将在页面完全加载时检查 cookie 是否启用：

jQuery `ready` 事件

ready 事件将在 DOM 加载时发生。此事件在文档完全准备好时发生，方便 jQuery 方法和事件。

ready 事件未在标签 <body onload=""> 中使用。让我们尝试一个示例来展示 $(document).ready 事件在 jQuery 中是如何工作的：

<html>
   <head>
      <title>jQuery Ready Method</title>
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script>
         $(document).ready(function() {
             $("#Demo_Div").click(function() {
                 alert("Hello, This is delftstack.com");
             });
         });
      </script>
   </head>
   <body>
      <div id = "Demo_Div">
         Click the div to see the alert.
      </div>
   </body>
</html>

文档准备好后，上面的代码将要求单击。一旦我们单击文档准备就绪，它将显示警报。

见输出：

`Window.onload` 和 `$(document).ready` 事件之间的区别

尽管 window.onload 和 $(document).ready 的工作方式相似，但它们仍然存在一些差异，如下所示：

明显的区别是 window.onload 是一个纯 JavaScript 事件；这就是为什么它在大多数库和浏览器中都可用。另一方面，$(document).ready 是一个 jQuery 事件，这意味着它仅在 jQuery 库中可用。
另一个主要区别是 window.onload 将等待图像和视频等内容加载；这就是为什么它需要很多时间。在加载大数据之前，不会执行其他代码。

另一方面，$(document).ready 是基于 DOM 的。一旦加载了 DOM，它将执行其他代码；它不会等待其他东西加载。
window.onload 比 $(document).ready 消耗更多时间。