告别 jQuery：如何在没有 jQuery 的情况下实现 $(document).ready()

javascript

2024-03-23 08:41:36

如何在没有 jQuery 的情况下实现 $(document).ready()

什么是 `$(document).ready()`？

在 web 开发中，$(document).ready() 是一个 jQuery 方法，用于确保在文档对象模型（DOM）加载完成后执行 JavaScript 代码。它通过在 DOM 加载完成时触发一个事件来工作。

在没有 jQuery 的情况下实现 `$(document).ready()`

如果您不使用 jQuery 库，可以通过以下方法实现类似的功能：

DOMContentLoaded 事件

DOMContentLoaded 事件在 DOM 加载完成后立即触发。

document.addEventListener("DOMContentLoaded", function() {
  // 在这里执行你的代码
});

onload 事件

onload 事件在页面完全加载后触发（包括图像和外部脚本）。

window.onload = function() {
  // 在这里执行你的代码
};

defer 属性

如果您使用 <script> 标签加载脚本，可以设置 defer 属性。这会指示浏览器在解析完 HTML 后加载脚本，但在页面加载之前执行它。

<script defer src="my-script.js"></script>

async 属性

async 属性类似于 defer，但它不会按加载顺序执行脚本。

<script async src="my-script.js"></script>

选择哪种方法？

选择哪种方法取决于你的特定需求：

如果需要在 DOM 加载后立即执行代码，请使用 DOMContentLoaded 事件。
如果需要在页面完全加载后执行代码，请使用 onload 事件。
如果脚本不会相互依赖，并且需要尽快执行，请使用 defer 或 async。

示例

// 使用 DOMContentLoaded 事件
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM 已加载");
});

// 使用 onload 事件
window.onload = function() {
  console.log("页面已完全加载");
};

// 使用 defer 属性
<script defer src="my-script.js"></script>

// 使用 async 属性
<script async src="my-script.js"></script>