加载 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...

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

原文由 Luiz 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

---

文档就绪处理 程序仅在加载 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： 或者您可以使用 load 方法将 addEventListener 事件处理程序绑定到脚本标记。

 <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 的末尾移动脚本标签，这有助于首先加载内容。

原文由 Pranav C Balan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以这样做：

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

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

原文由 Travis Acton 发布，翻译遵循 CC BY-SA 3.0 许可协议