JavaScript DOM 就绪

  1. 使用 jQuery ready() 函数在 DOM 就绪时调用函数
  2. DOM 准备就绪时使用 Vanilla JavaScript 方法调用函数

网站的加载从下载 HTML 文档开始。下载 HTML 文档后,将解析 HTML,并下载所需的资产。解析 HTML 之后,将同时呈现 DOM 和 CSS。此后,浏览器将处理 JavaScript 的 onload 功能。这是我们要调用函数的时间范围,因为正确呈现了 HTML、CSS 和 DOM。本教程教你如何在 DOM 准备就绪时调用函数。

使用 jQuery ready() 函数在 DOM 就绪时调用函数

jQuery 中的 ready() 函数在 DOM 准备好时执行代码。它等待所有元素完全加载,然后尝试访问和操作它们。我们可以选择 document 元素,一个空元素来调用函数,甚至直接调用一个函数。

$(document).ready(function() {
  // callback function / handler
});

它是完全跨浏览器兼容的方法,可以在 HTML 代码中的任何位置调用。

DOM 准备就绪时使用 Vanilla JavaScript 方法调用函数

我们可以使用 DOMContentLoaded 事件来创建与 jQuery 的 ready() 函数等效的 JavaScript。我们可以为 DOMContentLoaded 添加一个事件监听器,并使用该事件监听器调用所需的函数。但是有一个陷阱,如果事件已经发生,则不会触发回调。因此,我们通过检查文档对象的就绪状态来照顾这种情况。

const callback = function(){
};

if (document.readyState === "complete" || document.readyState === "interactive") {
  setTimeout(callback, 1);
} else {
  document.addEventListener("DOMContentLoaded", callback);
}

除了这些方法之外,还有一些技巧可以帮助我们解决这个问题,但在所有情况下可能并不十分理想。

  • 使用窗口的 onload 属性调用 JavaScript 函数。
  • 使用正文的 onload 属性调用 JavaScript 函数。这种方法可能非常慢,因为它等待每个元素都被加载。
  • 我们可以从主体的末端调用要执行的函数。在正文的最后,适当地渲染并准备好 DOM。因此,与任何元素相关的函数调用都没有问题。它比正文 onload 处理程序快得多,因为它不等待图像完全加载。

相关文章 - JavaScript DOM

  • 使用 JavaScript 启用/禁用输入按钮
  • JavaScript 中检查元素是否存在于 DOM