什么是非 jQuery 等效的 '$（document）.ready（）'？

这从 ECMA 完美地工作。该代码段是您所需要的，但如果您想挖掘更多内容并探索其他选项，请查看此详细说明。

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

不等于 JQuery，因为只等待 DOM 树，同时检查所有元素，包括外部资产和图像。window.onload$(document).ready$(document).readywindow.onload

编辑：添加了IE8和更早的等效项，这要归功于Jan Derk的观察。您可以在MDN上阅读此代码的来源：

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

除了 之外，还有其他选项。有关详细信息，请参阅 MDN 文档。"interactive"

现在是2018年，这是一个快速而简单的方法。

这将添加一个事件侦听器，但如果它已经触发，我们将检查 dom 是否处于就绪状态或是否已完成。这可以在子资源完成加载（图像、样式表、框架等）之前或之后触发。

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

其他读数

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • 检查加载是否已完成
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

更新

以下是一些使用标准ES6 Import & Export的快速实用程序帮助程序，我写的也包括TypeScript。也许我可以把这些作为一个快速库，可以作为依赖项安装到项目中。

JavaScript

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

TypeScript

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

承诺

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});