Waiting for jquery to load asynchronously before loading js

You can do it this way:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> var google_ad_slot; var google_ad_width; var google_ad_height; var google_ad_client; $(document).ready(function() { var adWidth = $(document).width(); google_ad_client = "ca-pub-6777348526535979"; if ( adWidth >= 768 ) { google_ad_slot = "3870513647"; google_ad_width = 728; google_ad_height = 90; } else { google_ad_slot = "1127560842"; google_ad_width = 320; google_ad_height = 50; } $("head").append('<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>'); }); </script> 

After DOM will be ready and scripts (including jQuery) will be loaded, jQuery will call this $(document).ready() function, your values will be initiated and Google Ad script will be added to the head section of a document.

All modern browsers correctly load and run script after adding it to DOM.

Variables should be global to let Google script work with them. You can also try changing $(document).ready to $(window).load if it won't work to become absolutely sure it has been loaded.

I think what you're looking for is AMD. AMD (asynchronous module definition) is a specification that allows Javascript modules to explicitly declare their dependencies and load asynchronously.

Probably the most famous implementation of AMD is RequireJS. Basically, you move your code from the <script> tag and change it as follows:

require(['jquery'], function($){ var adWidth = $(document).width(); // And the rest of your code }); 

Beware though, that jQuery doesn't support AMD very well, so you'll have to jump through some hoops. There are instructions on the RequireJS website to handle jQuery.