等待页面加载 js

在编写前端代码时，经常会涉及到等待页面加载完成后再进行相关操作的情况。本文将介绍一些方法，以便在 JavaScript 中实现等待页面加载完成的功能。

方法一：window.onload

window.onload 事件会在当前页面所有资源（例如图片、样式表、JavaScript 文件等）加载完成后触发，因此可以利用该事件来实现等待页面加载完成的功能。

window.onload = function() {
    // 页面加载完成后执行的逻辑
};

方法二：document.readyState

document.readyState 属性可以检测文档的加载状态。如果该属性的值为 "complete"，则表示页面加载完成。

document.onreadystatechange = function() {
    if (document.readyState == "complete") {
        // 页面加载完成后执行的逻辑
    }
};

方法三：jQuery.ready

如果你正在使用 jQuery，可以使用 jQuery.ready 函数来等待页面加载完成。

$(document).ready(function() {
    // 页面加载完成后执行的逻辑
});

方法四：defer

使用 defer 修饰 JavaScript 的 <script> 标签，可以告诉浏览器在页面加载完成后才执行该 JavaScript 文件。

<script defer src="path/to/script.js"></script>

方法五：async

使用 async 修饰 JavaScript 的 <script> 标签，可以告诉浏览器在下载该 JavaScript 文件时不阻塞页面的渲染，但是该文件下载完成后会立即执行，而不是等到页面加载完成。

<script async src="path/to/script.js"></script>

以上是几种实现等待页面加载完成的方法，选择适合自己的方法即可。