迹忆客 专注技术分享

网站的加载从下载 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 处理程序快得多，因为它不等待图像完全加载。