HOWTO · jQuery
jQuery 中的 Window.onload 與 $(document).ready
本教程演示瞭如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
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消耗更多時間。
