JavaScript - 如何确保加载了 jQuery？
[英]JavaScript - How do I make sure a jQuery is loaded?
问题描述
我有一个网页。 加载此网页时，我想执行一些 JavaScript。 此 JavaScript 使用 JQuery。 但是，似乎在加载页面时，jQuery 库尚未完全加载。 因此，我的 JavaScript 无法正常执行。
确保在执行 JavaScript 之前加载 jQuery 库的一些最佳实践是什么？
5 个解决方案
解决方案1
58 2009-07-14 12:44:56
已经有几个答案，每个答案都很好，但它们都依赖于确保在任何依赖项尝试使用 jQuery 之前同步下载它。 这种方法非常安全，但它也可能导致效率低下，因为在下载和解析 jQuery 库脚本时无法下载/运行其他资源。 如果你使用嵌入式标签将 jQuery 放在头部，用户浏览器将在下载和处理 jQuery 时处于空闲状态，而它可以做其他事情，如下载图像、下载其他脚本等。
如果您正在寻找启动时的快速响应能力，那么每一毫秒都很重要。
在过去一年左右的时间里，Steve Souders 对我帮助很大，他先是在雅虎，现在在谷歌。 如果您有时间，请查看他关于更快的网站和 高性能网站的幻灯片。 出色的。 对于大量的释义，请在此处继续。
将 javascript 文件附加到 DOM 时，已发现在文档的 <head> 中放置内联 <script> 标记会导致大多数浏览器在下载和解析该文件时阻塞。 IE8 和 Chrome 是例外。 要解决这个问题，您可以通过 document.createElement 创建一个“script”元素，设置适当的属性，然后将其附加到文档头。 这种方法不会阻止任何主流浏览器。
<script type='text/javascript'>
// Attaching jQuery the non-blocking way.
var elmScript = document.createElement('script');
elmScript.src = 'jQuery.js'; // change file to your jQuery library
elmScript.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild( elmScript );
</script>
这确保 jQuery 在下载和解析时不会阻止任何其他图像或 javascript 文件的下载和解析。 但是，如果您有一个依赖于 jQuery 的脚本在 jQuery 完成下载之前完成下载，那么这可能会出现问题。 jQuery 不会在那里，你会收到一条错误消息，指出 $ 或 jQuery 未定义。
因此，为确保您的代码能够运行，您必须进行一些依赖性检查。 如果不满足您的依赖项，请稍等片刻，然后重试。
<script type='text/javascript'>
runScript();
function runScript() {
// Script that does something and depends on jQuery being there.
if( window.$ ) {
// do your action that depends on jQuery.
} else {
// wait 50 milliseconds and try again.
window.setTimeout( runScript, 50 );
}
}
</script>
就像我之前说的，之前显示的方法没有问题，它们都是有效的并且都有效。 但此方法将确保您在等待 jQuery 时不会阻止页面上其他项目的下载。
此方法适用于任何文件，因此如果您必须包含 10 个 js 文件，则可以使用此方法附加每个文件。 您只需要确保您的检查功能在运行之前检查每个依赖项。
解决方案2
13 已采纳 2009-07-12 21:38:04
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>');
});
解决方案3
2 2009-07-12 21:40:12
可能有两个问题。 首先，您需要确保在使用它的任何脚本之前包含 jQuery。 如果您在局部中嵌入了 javascript，这可能会很棘手。 如果您在标头中加载 jQuery 并在正文末尾的脚本块中加载所有其他脚本，则可以确保 jQuery 在其他代码之前加载。 我尝试将所有内容都放在主体的末尾，jQuery 是第一个加载的脚本。
其次，在尝试在脚本中使用 DOM 之前，您需要确保 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...
});
解决方案4
1 2009-07-12 21:43:16
当浏览器遇到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 加载顺序。
解决方案5
0 2009-07-12 21:38:52
将代码放在jquery之后并执行此操作
$(document).ready( { // your code } );
解决方案6
0 2009-07-12 21:41:37
通常，您只需在 jquery 中使用以下基本的“文档加载”测试。 直接来自初学者 jquery 教程：
$(document).ready(function() {
// do stuff when DOM is ready
});
我能想到为什么这不起作用的任何原因，肯定有数百万个使用 jquery 的站点正是依赖于这段代码。
如何确保jQuery加载的可滚动模式内容始终滚动回到顶部？
[英]How can I make sure the jQuery loaded scrollable modal content always scrolls back to the top?
如何确保在调用js函数之前将动态生成的div加载到DOM中？
[英]How do I make sure dynamically generated div is loaded into DOM before js function is called on it?
如何在jquery或javascript中访问动态加载的元素？
[英]How do I access a dynamically loaded element in jquery or javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.