How do I run a jQuery function after jQuery is loaded?

Question

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?

Answer 1

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.