在 DOM 准备好之前运行 jQuery 代码？答案

【问题标题】：Running jQuery code before the DOM is ready?在 DOM 准备好之前运行 jQuery 代码？
【发布时间】：2023-10-19 02:10:01
【问题描述】：

有没有办法在 DOM 准备好之前执行 jQuery 代码？

【问题讨论】：

是的。但它与 DOM 交互的部分将不起作用。
是的，但鉴于 jQuery 主要是为了修改 DOM，你为什么要这样做？
见:: *.com/questions/4124765/…

标签： jquery

【解决方案1】：

jQuery 只是 Javascript，所以问题实际上是“是否可以在 DOM 准备好之前运行 JavaScript”，我猜你的意思是文档而不是 DOM。

如果我们同意这个问题是“是否可以在文档准备好之前运行 JavaScript”。那么答案是肯定的。 JavaScript 会在遇到时执行。

这就是为什么你几乎总是看到$(function(){...})或$(document).ready(function(){...})，因为大多数jQuery代码要求文档准备好，但附加事件处理程序的代码肯定会在文档准备好之前执行（否则它将无法处理文档就绪事件）。

通常您应该将 Javascript 包含在 HTML 的底部，但如果您希望它更早执行，您可以简单地将它放在文档的更早位置，例如在标题中。

<html>
  <head>
     ...
     <script>
        //place your code to be executed early here
     </script>
  </head>
...
</html>

【讨论】：

【解决方案2】：

如果你在文档的头部包含 jQuery，然后在头部的另一个脚本标签中编写代码，它将在 DOM 准备好之前运行：

<head>
    <script src="jquery.js"></script>
    <script>
        // Do some stuff before the DOM is ready
    </script>
</head>
<body>
    <!-- Browser hasn't got this far, so no elements will be available -->
</body>

但是，显然您将无法与任何 DOM 元素进行交互，因为它们还不存在。

话虽如此，是一种您可以在现代浏览器中使用的技术，可以让您在将 DOM 元素插入页面时（在浏览器呈现页面时）与它们进行交互。它依赖于CSS animation events。我写了a simple library (Progressive.js) 让这更容易处理。

【讨论】：