Question

我正在寻找一种在页面完全加载后加载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
}

Answer 1

试试这个：

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

Answer 2

您也可以使用：

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

Answer 3

对于您的问题，解决方案可能是将谷歌托管的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>之前的底部;并忽略分析器中的标记。

Answer 4

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

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

Answer 5

您可以尝试使用您的函数并使用超时等待加载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);
    }
}

Answer 6

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

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

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

Answer 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>代码的末尾添加脚本。

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

Answer 8

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

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

然后你可以绑定到那个触发的事件。

Answer 9

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

更多信息HERE。

Answer 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，那么在你放置jquery的地方不会太重要，除了页面速度工具会告诉你阻止渲染。

Answer 11

6年前，我已经问过这个问题，我得到的任何答案都有一些缺陷。后来我自己制定了一个解决方案，此后我一直使用了多年。现在，我再次遇到自己的问题，并且看到它有很多看法，我想与大家分享一下，因为我认为这可能会对其他人有所帮助。

此问题主要发生在主要详细信息类型的页面（可以是旧的.master和.aspx页面）或（在asp.net中的布局和视图）上，或者在其他Web开发语言上可能存在任何类似情况，但是始终存在涉及到主从模式。

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

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<script type="text/x-template" id="modal-template">
    <transition name="modal">
      <div class="vm-modal-mask">
        <div class="vm-modal-wrapper">
          <div class="vm-modal-container">
  
            <div class="vm-modal-header">
              <slot name="header">
                default header
              </slot>
            </div>
  
            <div :class="bgClass" class="vm-modal-body">
              <slot name="body">
                default body
              </slot>
            </div>
  
            <div class="vm-modal-footer">
              <slot name="footer">
                &nbsp;
                <button class="modal-default-button btn btn-primary" @click="clickHandler(),clear()">
               Got It!
                </button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>
  <div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
               
                    <modal v-if="showModalZ" @close="showModalZ = false">
                            <h5 slot="header"><strong>input goes here</strong></h5> <hr>
                            <div>
                            test
                            </div>
                            
            
                        </modal>
                        </div>

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

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

然后在页面的最后，在关闭body标签之前（当然现在已经加载了脚本），我在after.push(function(){ // code that requires scripts that will load later, //might be for example a jQuery selector or ... });数组中运行了所有函数：

after

我发现这种方式非常简单，简单且无瑕疵。

页面完全加载后加载jquery

11 个答案:

有关Jquery用法的一般提示：