在哪里放置$(文件).ready(function()?

时间:2013-07-15 16:28:52

标签: javascript jquery browser

我们经常在这里和那里阅读,我们必须将我们的js代码放在页头部分或之前(抱歉)结束正文标记。关于这一点的讨论,我只是想知道浏览器对这些东西的阅读顺序是什么(考虑到它们在这里的作用相同):

我们可以放置:

$(document).ready(function(){

无论页面结构在哪里,因为我们使用的是$(document).ready,还是应该将它放在头部?

任何人都可以澄清一下。

如果我的问题不明确,我可以改写。

5 个答案:

答案 0 :(得分:13)

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

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

jQuery构造$(document).ready的使用具有相同的结果,无论它放在文档中的什么位置。关键是要了解这个结构背后的功能:

  

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

因此,readydocument.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>

<强>文档

答案 1 :(得分:2)

AFAIK,在{DOM}完全加载后会引发$(document).ready事件,因此放置它的位置无关紧要。

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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