js 页面加载完执行事件|极客笔记

js 页面加载完执行事件

在开发网页的过程中，有时候我们需要在页面加载完成后执行一些特定的操作。这个时候，我们就可以使用JavaScript来监听页面加载事件，以便在页面加载完成后执行相应的代码。在本文中，我将详细讨论如何使用JavaScript来实现页面加载完毕后执行事件的功能。

页面加载事件

在浏览器中，页面加载完成后会触发不同类型的事件。其中，最常用的是DOMContentLoaded事件和load事件。

DOMContentLoaded事件：当HTML文档被完全加载和解析完成之后，会触发DOMContentLoaded事件。此时，页面的DOM结构已经完全构建好，但是一些外部资源如图片、样式表、脚本等可能还未加载完成。
load事件：当所有资源都加载完成后（包括外部资源如图片、样式表、脚本等），会触发load事件。此时，整个页面及所有资源都已经加载完成。

通常情况下，我们可以使用DOMContentLoaded事件来执行一些DOM操作，而使用load事件来执行一些需要等待所有资源加载完成才能进行的操作。

监听页面加载事件

在JavaScript中，我们可以通过以下两种方式来监听页面加载事件：

1. 使用DOMContentLoaded事件

document.addEventListener('DOMContentLoaded', function() {
    // 页面加载完毕后执行的代码
    console.log('页面加载完毕，可以执行相关操作了！');
});

上面的代码通过addEventListener方法来监听DOMContentLoaded事件，当页面加载完成后，会执行后面的回调函数中的代码。

2. 使用load事件

window.addEventListener('load', function() {
    // 页面加载完毕后执行的代码
    console.log('页面所有资源加载完毕，可以执行相关操作了！');
});

上面的代码通过addEventListener方法来监听load事件，当页面所有资源加载完成后，会执行后面的回调函数中的代码。

示例代码

下面是一个示例代码，演示了如何在页面加载完毕后执行事件：

<!DOCTYPE html>
<html lang="en">
<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">
    <title>页面加载事件示例</title>
</head>
<body>
    <h1>页面加载事件示例</h1>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 页面加载完毕后执行的代码
            console.log('页面加载完毕，可以执行相关操作了！');
        });

        window.addEventListener('load', function() {
            // 页面所有资源加载完毕后执行的代码
            console.log('页面所有资源加载完毕，可以执行相关操作了！');
        });
    </script>
</body>
</html>

在上面的示例中，当页面加载完成后，会通过控制台输出两条信息：