A feature of the jQuery document ready () function, which takes a very long time to execute

Question

My problem is that sometimes part of JavaScript (often Google Analytics) can take a very long time, although HTML does not need to be prepared for “moving and manipulating”. If I used the following code:

$(document).ready(function () { $("p").text("The DOM is now loaded and can be manipulated."); }); 

Does this mean that the <p> will not be filled until something like Google Analytics loads?

Something like Google Analytics is usually not required on most websites, and I often find that I'm waiting for it to load. (I do not want to use onload because of its unreliability .)

Is there a better way or way to say "don't wait [...]"?

Note. Usually I can’t put the code in the <script> tag immediately before the </body> , because the site is based on a template. Usually I can only edit the "content" of a page.

Answer 1

Google has actually released what they call Asynchronous Tracking :

 <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _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'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })(); </script> 

This solves the problem because it will only load after parsing the DOM, and so you can already use everything on the page.

Answer 2

Have you tried downloading Google Analytics from a predefined feature? Here's a link that discusses dynamic script loading. Presumably, you would do this at the end after the other parts of your finished script have already completed.

Answer 3

In most modern browsers, you can now write:

 <script>var _gaq = _gaq || [["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; </script> <script src="//www.google-analytics.com/ga.js" async></script> 

The script will load async in most browsers and automatically execute various schemes.

You may like to use a longer one - more secure for older browsers - version:

 <script>var _gaq = _gaq || [["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; </script> <script type="text/javascript" src="//www.google-analytics.com/ga.js" async="true" defer="true"></script> 

Several cavities:

• there is a bug in IE6 that will stop JS from loading due to a missing protocol (see http://www.paulirish.com/2010/the-protocol-relative-url/ ), but you can just add the protocol you use .
• older browsers will not understand the "async" property, so they will load if they are either delayed (after loading the page) or just load it when they find it (and not async).

Answer 4

This is just a guess, but did you consider setTimeOut ()?

 $(document).ready(function() { setTimeOut(function() { // Your code comes here }, 0); // We don't really need any delay }); 

setTimeOut () has a nice function to escape the call stack, so it can solve your problem.

Answer 5

I had the same problem. Just put this line first on the javascript download, and after that it works fine on IE:

 jQuery.noConflict();