資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律JavaScript 中 document load 和 DOMContentLoaded 事件的區別
要驗證網頁是否已完全載入，可以使用 DOMContentLoaded 和 load 事件。但是，有一些因素會影響人們選擇其中一個而不是另一個。讓我們看一下這兩個事件，並瞭解它們的功能。
當 DOMContentLoaded 事件觸發時，基本 HTML 頁面已載入並完成解析。此事件不會延遲樣式表、子框架和其他附加元件（如照片和圖片），直到它們完成載入。
當頁面完全載入時，應該觸發另一個名為 load 的事件。當 DOMContentLoaded 更合適時，使用 load 是一種常見的習慣。
同步 JavaScript 會暫停 DOM 解析。如果希望在使用者請求頁面後儘快解析 DOM，則可以將 JavaScript 設為非同步，並最佳化樣式表載入。通常情況下，樣式表會與主 HTML 內容同時載入，從而“竊取”主內容的流量，並減慢 DOM 解析速度。
語法
document.addEventListener("DOMContentLoaded", function(e) {
console.log("GfG page has loaded");
});
示例
在這個例子中，讓我們瞭解一下指示網頁 DOM 載入完成的訊息。它顯示在控制檯日誌視窗中，如下面的結果所示。
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<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 type="text/javascript">
document.addEventListener("DOMContentLoaded", function(e) {
console.log("TutorialsPoint page has loaded for you");
});
</script>
</head>
<body style="text-align: center">
<h3>Join one of the world’s largest online learning marketplaces.</h3>
<br>
<img src="https://tutorialspoint.tw/images/logo.png">
</body>
</html>
使用 DOMContentLoaded 事件的優勢包括
當訊息或內容顯示速度快得多時，使用者體驗會得到增強。
頁面載入所需時間更少。
文件載入 - load 事件使用不同的執行方法。當網頁的所有元素（包括 DOM 層次結構和相關功能，如 CSS 和 JavaScript 檔案、影像和照片以及外部連結）都已載入時，此事件完成。因此，load 事件主要用於確定頁面何時完全載入。
語法
document.addEventListener("DOMContentLoaded", function(e) {
console.log("GfG page has loaded");
});
示例
load 事件在整個網頁（HTML）以及所有補充資源（如 JavaScript、CSS 和圖片）完全載入後，針對視窗物件觸發。您使用 addEventListener() 函式建立事件監聽器來處理 load 事件。
從歷史上看，我們使用 load 事件在文件載入後執行指令碼。但是，還有一些其他情況可能更合適。
DOMContentLoaded 和 load 是兩個主要事件。根據 JavaScript.info 的說法，前者在瀏覽器載入所有外部資源（包括影像和樣式表）但尚未構建 DOM 樹時觸發，而後者在載入所有外部資源（包括影像和樣式表）時觸發。
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<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 type="text/javascript">
document.addEventListener("load", function(e) {
console.log("TutorialsPoint page has loaded completely for you");
});
</script>
</head>
<body style="text-align: center">
<h3>Enroll now in the most popular and best rated courses at TutorialsPoint.</h3>
<br>
<img src="https://tutorialspoint.tw/images/logo.png">
</body>
</html>
使用 load 事件的優勢
此事件有助於確定網頁的每個元素何時載入。
示例
視窗物件表示瀏覽器視窗。當元素完成載入時，onload 屬性處理 load 事件。這與視窗元素一起使用，以便在網頁載入完成後執行指令碼。此屬性的處理程式函式設定為需要執行的函式。網頁載入後，該函式將立即執行。
語法
window.onload = function exampleFunction() {
// Function to be executed
}
示例
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<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">
</head>
<body style="text-align:center">
<h2 style="color: rgb(6, 94, 119)">
Learn JavaScript with TutorialsPoint! </h2>
<strong>
In javascrip, how do I start a function when the page loads?
</strong>
<p>
The script has been already executed up. For the output, look at the console.
</p>
<script>
window.onload = function exampleFunction() {
console.log('Now, your script will load.');
}
</script>
</body>
</html>
3K+ 瀏覽量
