Question

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

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

Answer 1

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

如果您正在寻找启动时的快速响应，那么每毫秒都很重要。

在过去一年左右的时间里，史蒂夫·索德斯（Steve Souders）首先在雅虎工作，现在在谷歌工作。如果您有时间，请查看他的Even Faster Web Sites和High Performance Web Sites幻灯片。优秀。有一个重要的释义，请继续。

将javascript文件附加到DOM时，发现内联＆lt; script＆gt; ＆lt; head＆gt;中的标记文件的大小导致大多数浏览器在下载和解析该文件时阻止。 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文件，则可以使用此方法附加每个文件。您必须确保检查功能在运行之前检查每个依赖项。

Answer 2

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>');
});

Answer 3

可能有两个问题。首先，您需要确保在使用jQuery之前包含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...
});

Answer 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。

Answer 5

将代码放在jquery之后并执行此操作

$(document).ready( { // your code } );

Answer 6

通常，您只需在jquery中使用以下基本的“文档加载”测试。直接从beginners jquery tutorial：

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

我可以想到为什么这不起作用的任何原因，肯定有数百万个使用jquery的网站依赖于这些代码。

JavaScript - 如何确保加载jQuery？

6 个答案: