加载 jQuery 后如何运行 jQuery 函数？

Question

在我的网站上，我正在异步加载 jQuery。

为此，我必须在 jQuery 函数真正加载后才运行它。

我尝试了两种纯JS方式：

<script src="js/jquery-2.2.2.min.js" async></script>
<script>
    window.addEventListener('load', function() {
        //stuff
    }, true);
</script>

和

window.onload = function() {
    //stuff
}

但即便如此我仍然得到Uncaught TypeError: $(...) is not a function at...

如何在库完全加载后触发 jQuery 函数？

Answer 1

您需要在使用脚本标签加载jQuery库后添加脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  // your code should be here
  alert(typeof jQuery)
</script>

---

document ready handler 用于仅在加载 DOM 元素后执行代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  console.log('Outside document ready handler ' + $('.test').length)

  $(document).ready(function() {
    console.log('Inside document ready handler ' + $('.test').length)
  });
</script>
<div class="test"></div>

---

更新1：如果脚本在文件中，您可以使用defer，请参考以下问题：jquery loaded async and ready function not working

---

更新 2： 或者您可以使用 addEventListener 方法将 load 事件处理程序绑定到脚本标记。

<script async id="script" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  document.getElementById('script')
    .addEventListener('load', function() {
      alert(typeof jQuery)
    });
</script>

仅供参考：我不知道你为什么要这样做，为了优化内容加载的速度，最好将脚本标签移动到 body 的末尾，这有助于加载内容首先。

Answer 2

你可以这样做：

function checkVariable(){
   if ( window.jQuery){
      Do your jquery stuff here
   }
   else{
      window.setTimeout("checkVariable();",100);
   }
}
checkVariable();

抱歉格式化...现在卡在我的手机上。

Answer 3

我没有看到此方法列出，所以我想我会使用JavaScript HTML DOM EventListener 进行演示。

示例 #1 使用 jQuery.ready() 方法：

<p id="test-jquery">jQuery Not Loaded</p>

<script>
  $(document).ready(function() {
    var elem = $('#test-jquery');
    elem.text('jQuery Is Loaded');
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

此方法将不起作用，因为尚未加载 jQuery。 运行上面的例子会输出：

ERROR: {
  "message": "ReferenceError: $ is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 13,
  "colno": 3
}

示例 #2 使用 addEventListener() 方法：

<p id="test-jquery">jQuery Not Loaded</p>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    var elem = $('#test-jquery');
    elem.text('jQuery Is Loaded');
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由于我们正在侦听Window DOMContentLoaded event，因此此方法将起作用。

来自Mozilla：

此事件的原始目标是已加载的Document。 你可以在Window界面监听这个事件来处理它 捕获或冒泡阶段。有关本次活动的详细信息，请 请参阅文档上的页面：DOMContentLoaded 事件。

一个不同的事件，load，应该只用于检测满载 页。在 DOMContentLoaded 中使用 load 是一个常见的错误 更合适。

Answer 4

使用document.ready 或在标题中加载库。那应该可以工作。确保加载到正确的文件夹或正确的链接中。如果您使用链接来加载 jquery，请确保有 Internet 连接