js 页面加载完成后执行|极客笔记

js 页面加载完成后执行

在网页开发中，有时候我们希望在页面加载完毕后执行一些特定的操作，比如初始化一些变量、绑定事件或者发送请求等。这时候就需要在页面加载完成后执行相应的 JavaScript 代码。

方法一：使用 window.onload 事件

最常见的方法是使用 window.onload 事件。这个事件会在整个页面及其所有资源完全加载后触发，确保页面的所有内容都已经渲染完成。

示例代码如下：

window.onload = function() {
    // 这里写你的代码
    console.log('页面加载完成！');
};

这段代码会在页面加载完成后打印”页面加载完成！”。可以在函数内部编写任何你需要在页面加载完成后执行的代码。

方法二：使用 document.addEventListener(‘DOMContentLoaded’, callback)

另一种常见的方法是使用 document.addEventListener() 方法，监听 DOMContentLoaded 事件。这个事件会在 HTML 文档被完全加载和解析之后触发，不会等待样式表、图片和子框架的加载完成。

示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
    // 这里写你的代码
    console.log('DOM加载完成！');
});

这段代码会在 DOM 加载完成后打印”DOM加载完成！”。同样可以在函数内部编写任何需要在 DOM 加载完成后执行的代码。

方法三：使用 jQuery.ready() 方法

如果你在项目中使用了 jQuery，可以使用它提供的 ready() 方法来执行页面加载完成后的操作。

示例代码如下：

$(document).ready(function() {
    // 这里写你的代码
    console.log('jQuery 准备完成！');
});

这段代码会在 jQuery 准备完成后打印”jQuery 准备完成！”。也可以在函数内部编写任何需要在 DOM 加载完成后执行的代码。

方法四：使用 async 和 defer 属性

在编写 script 标签时，可以通过 async 和 defer 属性控制脚本的加载和执行顺序。

async 属性：异步加载该脚本，不会阻止其他页面操作，执行时机是在脚本加载完成后立即执行。
defer 属性：延迟加载该脚本，在 DOM 解析完毕后执行，按照在页面中出现的顺序依次执行。

示例代码如下：

<!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>Async and Defer Example</title>
</head>

<body>
    <h1>Async and Defer Example</h1>

    <script src="script1.js" async></script>
    <script src="script2.js" defer></script>
</body>

</html>

在这个示例中，script1.js 和 script2.js 分别通过 async 和 defer 属性加载。可以根据实际需求选择合适的属性来控制脚本的执行时机。

总结

在网页开发中，需要在页面加载完成后执行 JavaScript 代码是很常见的需求。可以使用 window.onload 事件、document.addEventListener(‘DOMContentLoaded’, callback) 方法、jQuery.ready() 方法或者 script 标签的 async 和 defer 属性来实现。根据实际情况选择合适的方法即可。