possibility of jQuery document ready() function taking a very long time to execute

问题

My issue is that sometimes a piece of JavaScript (often Google Analytics) may take a very long time to load, although it's not important to the HTML be ready to be "traversed and manipulated". If I were to use the following code:

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

would this mean that the <p> would not be populated till after something like Google Analytics is loaded?

Something like Google Analytics is generally not required on most websites and I have often found that I am waiting for it to load. (I don't want to use onload because of it's unreliability.)

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

Note: I usually cannot put the code in a <script> tag just before the </body> tag because the site is based in a template. I usually can only edit the "content" of the page.

回答1:

Have you tried loading Google analytics from within the ready function? Here's a link that discusses dynamic script loading. Presumably you'd do this at the end after the other parts of your ready script had already executed.

回答2:

Google has actually released what they're calling 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 once the DOM is parsed and therefore you can already use everything on the page.

回答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 on most browsers, and cope with different schemes automagically..

You might like to use the longer - safer 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>

A few cavets:

there's a bug in IE6 that will stop the JS from loading due to the missing protocol (see http://www.paulirish.com/2010/the-protocol-relative-url/) but you could just add the protocol you are using.
older browsers won't understand the "async" property so will load if either defered (after page loads) or just load it when they find it (so not async).

回答4:

This is just a guess but have you considered setTimeOut()?

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

setTimeOut() has the nice feature of escaping the call stack, so it might solve your problem.

回答5:

I had the same issue. Just put this line at first javascript load and it works fine on IE after that:

jQuery.noConflict();

来源：https://stackoverflow.com/questions/399359/possibility-of-jquery-document-ready-function-taking-a-very-long-time-to-execu

标签

jquery

google-analytics

onload