问题 在哪里放置$(文件).ready(function()?[复制]


这个问题在这里已有答案:


7840
2017-07-15 16:28


起源

由于在整个页面加载并准备好之前不会执行该功能,因此并不重要。可能存在小的性能差异。 - Barmar
如果你把它放在最后 <body>,你不需要 $(document).ready(function () { 因为DOM准​​备好了 - Ian
所以,没有人提到有一个限制:它需要在jquery脚本引用之后,不是吗? - Jason P
“身体的尽头”并不意味着 后 该 </body> 标签...它意味着 之前 它。 - Sparky
@collapsar:“身体的末端”是什么意思 后 该 </body> 标签,但“头部末端”的意思 之前 该 </head> 标签?


答案:


你可以放置 一个 脚本在文档中的任何位置。最佳实践通常建议在脚本中放置脚本以解决页面加载性能问题。此外,最佳实践通常建议将脚本放在一起以便于维护。

但是,根据规范,您放置文档的位置没有限制 script 标签。您可以将它们放在标题中,身体底部,整个文档上或其任何组合中。

使用jQuery构造 $(document).ready 无论文档放在何处,都会产生相同的结果。关键是要了解这个构造背后的功能:

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件,但在完全接收到所有资产(如图像)之前,不会触发此事件。

所以, ready 类似于 document.onload,但不一样。代码在哪里,如果你在何时执行它并不重要 document.onload 被解雇或jQuery触发时 ready。代码在文档中的位置仅在未被某个事件处理程序/侦听器包装时才有意义。

对位置的唯一限制 $(document).ready 是否在包含jQuery库之前不会发生这种情况。 $(document).ready 是使用jQuery,所以如果jQuery不存在....你不能使用它。

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script>
            alert('executed as soon as it is reached (as the document is downloaded)');
            $(document).ready(function () { alert('on jQuery ready'); });
        </script>
    </head>
    <body onload="alert('executed on document.onload event');">
        <script>
            alert('executed as soon as it is reached (as the document is downloaded)');
            $(document).ready(function () { alert('on jQuery ready'); });
        </script>
    </body>
</html>

文档


12
2017-07-15 16:31





据我所知, $(document).ready DOM完全加载后会引发事件,因此放置它的位置无关紧要。

但他们说要在正文末尾编写脚本,因为页面会立即显示给最终用户,javascript将继续作为后台进程运行。


2
2017-07-15 16:31



你是对的,纠正了。 - Sunny
downvote已撤销,评论已删除 - collapsar


浏览器从上到下执行脚本,因此head部分中的srcipt将在正文中的脚本之前执行。我更喜欢把脚本置于html代码之下,但一般情况下,如果你为了加载页面而烦恼。


1
2017-07-15 16:35





文档就绪函数将等到DOM加载后再运行。从技术上讲,你把它放在哪里并不重要。许多人喜欢将脚本放在头部,因为它确保在加载页面之前读取脚本。其他人喜欢将它放在最后(就在结束体标记之前),以便在脚本读取之前加载页面的所有元素。但是,既然你还在等待DOM加载,那也没关系。

如果你有一个小函数,那么我只需将文档就绪函数放在head标签中。


0
2017-07-15 16:33





据我所知,BKM将它放在页脚中(尽管大多数开发人员倾向于将其放在head标签中)。 主要原因 - 大多数文档DOM在加载JS之前呈现给浏览器。


0
2017-07-15 16:34