页面完全加载后加载jquery答案

【问题标题】：load jquery after the page is fully loaded页面完全加载后加载jquery
【发布时间】：2013-09-26 10:58:17
【问题描述】：

我正在寻找一种在页面完全加载后加载 jquery 的方法。
好吧，这里有很多关于它的问题和答案，但都描述了如何在页面或 jquery 完全加载后运行需要 jquery 的脚本。
我正在寻找的是加载页面然后调用 jquery 并在加载 jquery 后调用函数。类似：

document.onload=function(){
   var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.7.2.min.js');
//Here I need an event to know that jquery is 
//loaded to run stuff that needs jquery
}

【问题讨论】：

我能知道你为什么需要这个吗？
谷歌分析一直说该脚本会减慢我的页面加载速度并建议在页面加载后加载它
也许您可以将 Javascript 代码放在一个单独的文件中，然后将该脚本包含在正文的底部
对我来说，这很好地解释了何时加载 js 以及为什么.. *.com/questions/18999638/…

标签： javascript jquery html

【解决方案1】：

您可以使用.onload 函数。它在页面完全加载（包括图形）时运行一个函数。

window.onload=function(){
      // Run code
    };

或者另一种方式是：在页面底部包含脚本。

【讨论】：

$( window ) 表示在文档中加载了jquery。但是没有jquery。我们要创建它并运行 jquery 代码
我在这里使用window.onload javascript函数。

【解决方案2】：

建议在<body> 块的底部加载脚本以加快页面加载速度，如下所示：

<body>
<!-- your content -->
<!-- your scripts -->
<script src=".."></script>
</body>
</html>

【讨论】：

【解决方案3】：

试试这个：

 $(document).ready(function() {
// When the document is ready
// Do something  
});

【讨论】：

太棒了！谢谢。我一直想知道这个 .ready 是什么:)

【解决方案4】：

对于您的问题，解决方案可能是将 google 托管的 CDN 附加到某些库：

https://developers.google.com/speed/libraries/devguide

另外，您可以在页面底部添加这个（就在</body> 之前）：

<script type="text/javascript">
(function() {
    var script = document.createElement('script')
    script.setAttribute("type", "text/javascript")
    script.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js")
    document.getElementsByTagName("head")[0].appendChild(script)
})();
</script>

但是，我认为这是有风险的。您对 jquery 有一个异步调用，因此您的 jquery 必须等到它加载（即$(document).ready 在这种情况下不起作用）。所以我的回答是：使用谷歌建议的 CDN；把你的javascript放在</body>之前的底部；并且，忽略分析器的标志。

【讨论】：

我调用后，需要jquery运行的脚本放在哪里？
为清晰起见进行编辑。很抱歉没有在之前的评论中注意到问题。如果你使用我的 sn-p，可能你唯一的选择就是把你的代码放在下面。所以它会是这样的：就在 sn-p 的下方。代码将按顺序进行评估，因此您可以确定要加载 jQuery（我相信 - 实际上我一直使用 google 的 CDN）。
你可以使用window.onload()等到jquery被加载，如果你只是用通常的方法把你的资源放进去。

【解决方案5】：

你也可以使用：

$(window).bind("load", function() { 
    // Your code here.
});

【讨论】：

【解决方案6】：

您可以尝试使用您的函数并使用超时等待 jQuery 对象加载

代码：

document.onload=function(){
    var fileref=document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.7.2.min.js');
    document.getElementsByTagName("head")[0].appendChild(fileref);
    waitForjQuery();
}

function waitForjQuery() {
    if (typeof jQuery != 'undefined') {
        // do some stuff
    } else {
        window.setTimeout(function () { waitForjQuery(); }, 100);
    }
}

【讨论】：

这更可能是我正在寻找的东西，当加载 jquery 完成并且不检查超时时，难道没有触发事件吗？
我正在使用这种方法，暂时找不到任何替代方法
这个解决方案可能有点过头了，你可以通过降低浏览器的性能来获得更好的谷歌分析性能。不是缺乏常识吗？带有通用库的 CDN + 一个缩小的自定义 javascript 就足够了，恕我直言。
取决于带宽、计算机/浏览器速度等。这是肯定的。

【解决方案7】：

我的猜测是您在页面的<head> 部分加载了 jQuery。虽然这无害，但它会减慢页面加载速度。尝试使用这种模式来加快 DOM 树的初始加载时间：

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="">
</head>

<body>
    <!-- PAGE CONTENT -->

    <!-- JS -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        $(function() {
            $('body').append('<p>I can happily use jQuery</p>');
        });
    </script>
</body>

</html>

只需在 <body>tag 的末尾添加脚本即可。

由于实际原因，有一些脚本需要放在头脑中，最突出的库是 Modernizr

【讨论】：

因为无论如何你总是需要等待 dom-ready 事件（这就是你这样做的原因$(document).ready(...)），你会发现没有区别。

【解决方案8】：

如果您可以从自己的服务器加载 jQuery，那么您可以将其附加到您的 jQuery 文件中：

jQuery(document).trigger('jquery.loaded');

然后您可以绑定到该触发事件。

【讨论】：

【解决方案9】：

在关闭 body 标记之前，在页面的底部包含您的脚本。

更多信息HERE。

【讨论】：

【解决方案10】：

如果您试图避免在加载内容之前加载 jquery，最好的方法是简单地将对它的引用放在页面底部，就像许多其他答案所说的那样。

关于 Jquery 使用的一般提示：

使用 CDN。这样，您的网站可以使用用户可能在其计算机上拥有的缓存版本。开头的// 允许调用它（并使用相同的资源），无论它是http 还是https。示例：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用 CDN 有几个很大的好处：它使用户更有可能从另一个站点缓存它，因此不会有下载（也没有渲染阻塞）。此外，CDN 使用最近、最快的可用连接，这意味着如果他们确实需要加载它，它可能会比连接到您的服务器更快。 More info from Google.

将脚本放在底部。 将尽可能多的 js 移到页面底部。我使用 php 在页脚下方包含一个包含我所有 JS 资源的文件。
如果您使用的是模板系统，您可能需要在整个 html 输出中传播 javascript。如果您在页面呈现时调用的脚本中使用 jquery，这将导致错误。要让您的脚本等待 jquery 加载，请将它们放入

window.onload() = function () { //... your js that isn't called by user interaction ... }

这将防止错误，但仍会在用户交互之前运行且无需计时器。

当然，如果 jquery 被缓存了，那么你把它放在哪里都没关系，除了页面速度工具会告诉你你正在阻止渲染。

【讨论】：

【解决方案11】：

我在 6 年前问过这个问题，我得到的任何答案都有一些缺陷。后来我自己制定了一个解决方案，从那时起我一直在使用多年。现在我又遇到了自己的问题，看到它有很多观点，我想分享它，因为我认为它可能对其他人有所帮助。

这个问题主要发生在Master-Detail类型的页面（可以是旧的.master和.aspx页面）或（asp.net中的布局和视图）或任何类似的情况可能在其他Web开发语言上，但总是有涉及主从模式。

对于解决方案，我只是在页面开头添加了一个数组：

<script>var after = [];</script>

任何需要 jQuery 的函数或将在本节之后运行的任何其他脚本，而不是运行它，我只是将它推送到这个数组：

after.push(function(){
     // code that requires scripts that will load later,
     //might be for example a jQuery selector or ...
});

然后在页面的最后，在关闭正文标记之前（当然脚本现在已经加载）我运行（这里命名的）after 数组中的所有函数：

<script>for(var i=0;i<after.length;i++)after[i]();</script>
</body>

我发现这种方式非常简单、简单且完美。

【讨论】：