JavaScript - 如何确保已加载 jQuery？答案

【问题标题】：JavaScript - How do I make sure a jQuery is loaded?JavaScript - 如何确保已加载 jQuery？
【发布时间】：2010-11-10 03:50:21
【问题描述】：

我有一个网页。加载此网页时，我想执行一些 JavaScript。此 JavaScript 使用 JQuery。但是，似乎在加载页面时，jQuery 库还没有完全加载。因此，我的 JavaScript 无法正常执行。

有哪些最佳实践可以确保在执行 JavaScript 之前加载 jQuery 库？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

jQuery 库应该包含在页面的 <head> 部分中：

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

你自己的代码应该在这之后。 JavaScript 是线性同步加载的，只要按顺序包含脚本就不用担心了。

要让你的代码在 DOM 完成加载后执行（因为在这种情况发生之前你不能真正使用很多 jQuery 库），这样做：

$(function () {
    // Do stuff to the DOM
    $('body').append('<p>Hello World!</p>');
});

如果您正在混合 JavaScript 框架并且它们相互干扰，您可能需要像这样使用 jQuery：

jQuery(function ($) { // First argument is the jQuery object
    // Do stuff to the DOM
    $('body').append('<p>Hello World!</p>');
});

【讨论】：

实际上同步加载第三方库是一种不好的做法！如果您依赖于它们的加载顺序，最好将脚本包含在 body 的末尾，因此它不是渲染阻塞，并且仍然是同步加载的，例如之后包含的脚本在执行此脚本后执行。

【解决方案2】：

可能有两个问题。首先，您需要确保在使用它的任何脚本之前包含 jQuery。如果您在部分中嵌入了 javascript，这可能会很棘手。如果您在标题中加载 jQuery，而在正文末尾的脚本块中加载所有其他脚本，则可以确保在您的其他代码之前加载 jQuery。我尝试将所有内容放在正文的末尾，jQuery 是第一个加载的脚本。

其次，您需要确保 DOM 已完全加载，然后再尝试在脚本中使用它。 jQuery 为此提供了一个现成的方法。将您的代码包装在 ready 方法中，您可以（更）确定 DOM 可供您使用。并非所有图像都可以加载，但您应该可以接受大多数其他内容。对于图像，如果这对您的代码至关重要，您可能需要更加努力地确保它们已加载。

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script>
$(document).ready( function() {
   ...your code here...
});

或（简写）

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script>
$(function() {
   ... your code here...
});

【讨论】：

我处于同样的情况，我不能确定 jquery 是否已完全加载。因为 $(document).ready() 不起作用，我无法编写代码“如果未加载 jquery 再次加载它”。有什么办法可以实现吗？

【解决方案3】：

一般来说，您只需在 jquery 中使用以下基本的“文档加载”测试。直接来自beginners jquery tutorial：

 $(document).ready(function() {
   // do stuff when DOM is ready
 });

我能想到为什么这不起作用的任何原因，肯定有数百万个使用 jquery 的站点正是依赖于这段代码。

【讨论】：

有时我们使用客户端脚本，它们本身不加载 jquery。这些是加载远程脚本的简单引导脚本。它在我想加载我的外部库的远程脚本中，比如 jQuery。因此，我必须做一些动态 DOM 修改，比如事后添加 jQuery 脚本。正是在这些远程脚本中，您会发现这个问题所解决的问题。

【解决方案4】：

当浏览器遇到script 元素时，它会阻塞，这意味着只要你有一个script 元素来加载jQuery在任何想要使用jQuery 的脚本之前，你应该没问题，例如

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
    // jQuery is available

    $(document).ready(function(){
        // ...
    });
</script>

有关此主题的其他评论，请参阅 JavaScript Load Order。

【讨论】：

【解决方案5】：

已经有几个答案，每个都很好用，但都依赖于确保 jQuery 在任何依赖项尝试使用它之前同步下载。这种方法非常安全，但它也可能导致效率低下，因为在下载和解析 jQuery 库脚本时无法下载/运行其他资源。如果您使用嵌入式标签将 jQuery 放在头部，用户浏览器将在下载和处理 jQuery 时处于空闲状态，而它可能正在执行其他操作，例如下载图像、下载其他脚本等。

如果您希望在启动时快速响应，那么每一毫秒都很重要。

在过去一年左右的时间里，Steve Souders 给了我很大的帮助，他先是在雅虎，现在在谷歌。如果您有时间，请查看他的幻灯片 Even Faster Web Sites 和 High Performance Web Sites。优秀。如需大意，请在此处继续。

在将 javascript 文件附加到 DOM 时，发现在文档的

中放置内联

【讨论】：

很棒的答案，希望我能多点赞！我现在正在使用这种技术，效果很好。（顺便说一句，您可能在elmScript .src 和elmScript .type 中有一个不需要空格的错字。）
我喜欢这个答案。也解决了我在另一个问题中发布的问题。
如果 $ 被另一个 javascript 库使用，请确保将其替换为 jQuery。
我使用了一个 setInterval，它每 50 毫秒循环一次（或者您选择的某个时间间隔，但不要太短，因为 http 请求必须有足够的时间来询问-回答），而不是设置超时时间，并且在每个循环中，检查条件会在执行下一个动态脚本创建之前询问动态创建的脚本功能是否已完成。不过，我承认，即使这些函数报告完成，我仍然有时（但很少）得到“JQuery 不是函数”js 错误。因此，我正在阅读此页面：/
@GregoryLewis，如果未定义 jquery，Shane 的脚本会调用自身，因此无需使用 setInterval 而不是 setTimeout。