logo标签列表

在单个HTML页面中，我能否使用多个jQuery的$(document).ready()函数？

jqueryhtmldocument-ready
7
我有一个名为"text.html"的HTML页面。
<html>
    <body>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="js/Photos.js"></script>
        <script type="text/javascript" src="js/Animations.js"></script>
    </body>
</html>

无论是Photos.js还是Animations.js，都以 "$(document).ready()" 开始，如下所示：
//Javascript File Photos.js
$(document).ready(function() {
    //My code here ....
});

//Javascript File Animations.js
$(document).ready(function() {
    //My code here ....
});

我在单个HTML页面中使用多个 $(document).ready(function() { 会有影响吗？

谢谢您的帮助。

5个回答
7

您可以使用任意数量的标签，但为了易读性，最好只使用一个。

还要考虑使用简写形式 $(function() { ... });

1
$(function() { ... }); 和 $(document).ready(function() { 是一样的吗？ - programmer
3

如果在同一个html页面中使用多个$(document).ready(function(){}会有影响吗？

是的，这会影响。

对于同一件事情，jQuery函数被调用了多次，从而浪费时间和内存。

对于你编写的代码和插件，你应该尽量只使用一个$(document).ready()或者$(window).load()，但是像你指出的那样，你会发现许多插件以这种方式开始。

编辑

如果您真的无法抵制多次使用$(document).ready()，请至少尝试在第一次使用时将文档的引用存储在变量中，这样您就不必每次都检查文档对象，就像这样：

// store the jQuery document object to a variable
var $document = $(document);

$document.ready( //... );

至少你可以减少一些函数调用。

1
这实际上是一个非常有力的观点。比我的回答更好。从技术上讲，在“工作”方面，多个 $(document).ready() 是可以工作的，但这并不明智。 - Kalle H. Väravas
3
嗯...我在StackOverflow的一个旧帖子中看到，如果我在</body>之前包含<Script src="Photo.js"></script>，那么就不需要使用document.ready(function(){了，是这样吗？ - programmer
@程序员：这可能是真的，也可能不是，但使用document.ready会保证DOM在执行代码之前完全加载。我认为将代码放在</body>标签之前仍然是为了加载性能而不错的选择。请参见我的更新答案以获取详细信息。 - Sparky
2
在单个HTML页面中使用多个 $(document).ready(function() { 是否有影响？
不会有影响，在许多情况下这是正确的做法。但是，像往常一样，我想给出一些（有用的）指针：
正如您在评论中提到的那样，从技术上讲，在 </body> 之前添加文件调用意味着您基本上不需要使用 $(document).ready()。我个人尽量避免使用它，因为jQuery不像JS那样严格（这意味着大多数脚本无需使用 $(document).ready()）。
此外，在页脚或甚至在 <body> 中添加jQuery并不明智。从技术上讲没有错误，但是如果您正在处理类似CMS软件或某些模板功能，则希望所有页面都包含jQuery。或者您可以称其为老派知识。

由于您想在页脚中调用Photos.js和Animations.js，我认为它们不是正确的插件。如果您想使代码更紧凑，则将它们组合成正确的插件。然后，您可以在头部添加插件，并拥有单个页脚文件，在其中将插件分配给元素（即：激活它们）。这里有一个快速教程，介绍如何创建自己的插件。

此外，如果您有多个JS文件必须包含到页面中。那么您可以使用$.getScript()使代码更加整洁。您必须像往常一样先添加jQuery，但是通过一个<script>标签可以调用其他文件。看起来更整洁，而且似乎也更快一些（至少在您自己的头脑中）。以下是一个小例子：

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <!-- Content camps here -->
        <script type="text/javascript">
            $.getScript('js/Photos.js');
            $.getScript('js/Animations.js');
        </script>
    </body>
</html>
2
我不同意“另外，在页脚甚至<body>中添加jQuery都是不明智的。”请参见http://developer.yahoo.com/performance/rules.html#js_bottom。但是，我同意许多CMS开发人员不了解这种实践，因此你只能在</body>之前添加JavaScript而不是在<head>中添加。 - T. Junghans
这是一个非常好的观点。我必须承认，我之前并不知道这一点。在我的当前项目（CMS软件）中非常有用。由于大多数CMS都有header.php和footer.php静态文件，因此将脚本添加到footer并不那么困难，但我的直觉仍然告诉我不要将jQuery作为最重要的库之一添加到footer.. :/ - Kalle H. Väravas
jQuery 应该是您包含的第一个脚本。我知道有些 CMS 不仅在 head 中有 JavaScript，而且还有内联（在 HTML 标签中）。如果这些依赖于 jQuery，则需要将其置于顶部。 - T. Junghans
我刚刚测试了这个方法。基本上，它使页面加载时间更长。我理解这个方法，但在我的当前项目中，它使页面加载（脚本方面）更长。在CMS管理区域中，没有太多的图像，并且背景通常是从CSS中获取的，这些将在脚本之前加载。这意味着，在某些情况下，这种方法会使页面加载时间更长。然而，这是一个必须知道的方法...只需谨慎选择要使用它的项目。 - Kalle H. Väravas
2
一点也不。它们都只会在同一个事件上触发。这没问题。 :)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接