JavaScript -如何确保加载了jQuery？

Question

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

确保在执行JavaScript之前加载jQuery库的一些最佳实践是什么？

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

Answer 2

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

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

在过去一年左右的时间里，史蒂夫·苏德斯给了我很大的帮助，首先是他在雅虎，现在是在谷歌。如果你有时间，可以看看他关于Even Faster Web Sites和High Performance Web Sites的幻灯片。太棒了。要获得更大的解释，请继续这里。

在将javascript文件附加到DOM时，已发现在文档的中放置inline标记会导致大多数浏览器在下载和解析该文件时阻塞。IE8和Chrome是例外。要解决这个问题，可以通过document.createElement创建一个“脚本”元素，设置适当的属性，然后将其附加到文档头。这种方法在任何主流浏览器中都不会阻塞。

<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 3

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