JavaScript 等待 DOM 加载

当编写 JavaScript 代码时，经常需要等待 HTML 文档的 DOM（文档对象模型）已加载并准备好可以使用。本篇介绍几种方法来等待 DOM 加载，以及在加载后执行代码的技巧。

使用window.onload()

window.onload = function() {
  // do something when the DOM is fully loaded
};

window.onload 事件会在整个页面（包括图片和其他资源）都已加载完毕后触发。这表示页面上的所有 DOM 元素都已被正确创建和渲染，可以安全地执行 JavaScript 代码。

使用document.ready()

$(document).ready(function(){
  // do something when the DOM is ready
});

$(document).ready() 是由 jQuery 框架提供的函数。它在浏览器中加载 HTML 文档时运行，但在 DOM 加载完成之前便可执行。它等待 HTML 文档的 DOM 加载完成后触发，就可以根据需要执行一些操作。

使用DOMContentLoaded事件

document.addEventListener("DOMContentLoaded", function() {
  // do something when the DOM is loaded
});

DOMContentLoaded 事件是浏览器原生提供的，可以在 HTML 文档的 DOM 加载完成后触发。它不考虑其他资源，比如图片和样式表的加载状态，并在加载脚本的同时并行解析 HTML。

使用async 和 defer 属性

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

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

通过在脚本标记上添加 async 或 defer 属性，可以使脚本在 HTML 文档加载时异步执行。async 属性表示脚本不需要等待其他资源（比如 CSS 和 JavaScript）加载完成，就可以开始执行。defer 属性表示脚本需要等到其他资源都加载完成后再执行。

结论

等待 DOM 加载需要在各种浏览器中完成。通过以上方法使 JavaScript 代码在正确的时间加载，可以减少页面加载时间，并提高用户体验。根据具体情况选择最适合的方法应用。