Getting "$ is undefined" error after changing jQuery script loading to async

Question

I am getting a "$ is undefined" error on $(document).ready() after changing jQuery script loading to async.

Following is the short version of my code. It was working before I added the async attribute to my <script> tag that loads jQuery.

I did this based on the recommendation provided by Google Page Insight to improve my page's performance

<script src="/scripts/jquery.min.js" async></script>
<script>
    $(document).ready(function(){  
       //Some variable initialization 
    });
</script>

Of course you get that, because the first script is not yet loaded when the second one gets executed … that’s what async means. You want defer instead – that does preserve and guarantee execution order. — C3roe
– C3roe, Commented Nov 20, 2015 at 20:31
But will defer impact page load time in google page insight check. — Avinash Jain
– Avinash Jain, Commented Nov 20, 2015 at 20:36

Paul Roub · Accepted Answer · 2015-11-20 20:36:34Z

3

You can force your initialization code to wait until jQuery is loaded by calling it from an onload handler on your <script> tag:

<script src="//code.jquery.com/jquery-1.11.3.min.js" async onload="init()"></script>

<script>
  function init() {
    $(document).ready(function() {
      //Some variable initialization 

      console.log("loaded");
    });
  }
</script>

answered Nov 20, 2015 at 20:36

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting "$ is undefined" error after changing jQuery script loading to async

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related