Loading jQuery asyncronously

Question

My google analytics is supposed to load asynchronously. I am not sure really what this means:

<script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'xxx']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

I don't need jQuery to be available immediately. Is there a way I can also make this asynchronous?

Community · Accepted Answer · 2017-05-23 11:55:38Z

3

Google Analytics is loading asynchronously in your example. The part that handles that is ga.async = true;. Asynchronous means that the browser will continue to load rest of the content even if this one takes longer to load. In older browser, the content would be loaded in the order of the document and if something was slow to load, it would take longer for the browser to display the page.

If you want jQuery to load asynchronously, simply add async="async" to your <script> tag. Please keep in mind that only newer browser support this.

Alternatively, Google does offer Google Loader which allows you to load jQuery and many other libraries asynchronously. You can have a look at this Stack Overflow question for an example.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Jun 19, 2011 at 18:28

Francois Deschenes

25.1k4 gold badges67 silver badges61 bronze badges

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

4 Comments

kobe Over a year ago

do you have any link which says what are all browsers support asyn true attribute.

Francois Deschenes Over a year ago

@kobe, @Matt Ball - That's not quite true anymore. Many browsers now support the async attribute including Safari, Chrome and Firefox. Firefox 3.6 was the first but many have implemented that feature now. http://en.wikipedia.org/wiki/Comparison%5Fof%5Flayout%5Fengines%5F%28HTML5%29#Attributes has a list. WebKit is used by Chrome and Safari and Gecko is Firefox.

Francois Deschenes Over a year ago

Internet Explorer 9 supposedly also has support for the attribute.

Matt Ball Over a year ago

It appears that while Chrome does support async, Safari does not. stackoverflow.com/questions/1834077/…. A bugfix in WebKit does not immediately mean a bugfix in the browsers that use WebKit, since (especially Safari) the latest version of the browser does not necessarily mean the latest version of WebKit.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

HeadJS provides a nice API for this sort of thing.

JavaScript loader Load scripts in parallel but execute in order

Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js",
function() {
    // all done
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 19, 2011 at 18:24

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

5 Comments

UCC Over a year ago

I don't want to sound negative but if this is so good then why are other people not using it ?

Niklas Over a year ago

@UCC most pages that use jQuery require jQuery to be available right away.

David Wick Over a year ago

the project has over 1700 follows on github. what makes you say people aren't using it?

kobe Over a year ago

@all , i think only firefox support this asyn=true attribute right , thats what i read while implmenting google analytics

Francois Deschenes Over a year ago

Both Gecko (Firefox) and WebKit (Chrome & Safari) now support the async attribute.

Matthew Manela · Accepted Answer · 2011-06-19 18:55:19Z

0

I use this function to load JavaScript files asynchronously:

function loadJS(url) {
    var js = document.createElement('script');
    js.src = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(js);
}

Then just call it like this:

<script type="text/javascript">
    loadJS("http://pathToJSFile");
</script>

answered Jun 19, 2011 at 18:55

Matthew Manela

16.8k3 gold badges67 silver badges67 bronze badges

Comments

bluish · Accepted Answer · 2011-06-20 09:48:25Z

0

On Onload () event of a page you can insert a function that will automatically assign references to the JavaScript files you want to load in asynchronous manner after page loading.

function afterLoad(){
  var element1 = document.createElement(“script”);
  element1.src = “somefile.js”;
  element1.type=”text/javascript”;
  element1.async=true;
  document.getElementsByTagName(“head”)[0].appendChild(element1);
}

For more info check out http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html

edited Jun 20, 2011 at 9:48

bluish

27.5k28 gold badges126 silver badges185 bronze badges

answered Jun 19, 2011 at 18:35

Varun Mittal

4863 silver badges8 bronze badges

Collectives™ on Stack Overflow

Loading jQuery asyncronously

4 Answers 4

4 Comments

JavaScript loader Load scripts in parallel but execute in order

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

JavaScript loader Load scripts in parallel but execute in order

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related