logo标签列表

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

jquery
17

在DOM准备就绪之前，有没有一种方法可以执行jQuery代码？

2
是的。但与DOM交互的部分将无法工作。 - James Allardice
2
有的，但是考虑到jQuery主要用于修改DOM，你为什么想要这样做呢？ - Rory McCrossan
请在 DOM 准备就绪之前加载 jQuery。 - Sudhir Bastakoti
2个回答
20

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>
4
如果您将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动画事件。我编写了一个简单的库（Progressive.js）来使这更容易处理。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接