JavaScript DOM 就绪

Harshit Jindal 2023年1月30日 2021年4月29日
  1. 使用 jQuery ready() 函数在 DOM 就绪时调用函数
  2. DOM 准备就绪时使用 Vanilla JavaScript 方法调用函数
JavaScript DOM 就绪

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

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

相关文章 - JavaScript DOM