如何在加载jQuery后运行jQuery函数？(How do I run a jQuery function after jQuery is loaded?)

如何在加载jQuery后运行jQuery函数？(How do I run a jQuery function after jQuery is loaded?)

在我的网站上，我正在异步加载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函数？

At my website, I am loading jQuery asynchronously.

In order to do that, I must run jQuery functions only after it is really loaded.

I've tried two pure JS ways:

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

And

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

But even so I still get Uncaught TypeError: $(...) is not a function at...

How do I fire jQuery functions after the lib is fully loaded?

最满意答案

只有在使用脚本标记加载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已加载异步并且就绪函数无法正常工作 
 
 
 更新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末端移动脚本标签，这有助于首先加载内容。 
You need to add the script only after jQuery library is loaded using script tag.
 
 
 
  
  
<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> 
  
 
 
 
The document ready handler is using to execute the code only after DOM elements are loaded.
 
 
 
  
  
<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> 
  
 
 
 
UPDATE 1: You can use defer if script is in a file, refer following question: jquery loaded async and ready function not working
 
 
UPDATE 2: Or you can bind load event handler to the script tag using addEventListener method.
 
 
 
  
  
<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> 
  
 
 
FYI : I don't know why you are doing this, for optimizing the speed of content load it's always better to move the script tags at the end of body which helps to load content first.