CODEWITHSUNDEEP
javascriptjqueryasynchronous
user2650277
user2650277

Reputation: 6729

Waiting for jquery to load asynchronously before loading js

I am using the following to load ads on my site

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
        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;
        }
    </script>
    <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

It works fine but i think i can optimize the ad delivery further.I want to load the jquery asynchronously and thus the following script must wait for the jquery to be loaded.

<script type="text/javascript">
            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;
            }
        </script>
        <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

How can i accomplish this ?

Upvotes: 2

Views: 1276

Answers (2)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

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.

Upvotes: 3

art-solopov
art-solopov

Reputation: 4755

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.

Upvotes: 2

Related Questions