w3schools - posibilidad de que la función jQuery document ready() tome mucho tiempo para ejecutarse

html on ready

Question

Mi problema es que a veces un fragmento de JavaScript (a menudo Google Analytics) puede tardar mucho tiempo en cargarse, aunque no es importante que el HTML esté listo para ser "atravesado y manipulado". Si tuviera que usar el siguiente código:

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

¿Esto significaría que el <p> no se poblaría hasta después de cargar algo como Google Analytics?

Por lo general, no se requiere algo como Google Analytics en la mayoría de los sitios web, y a menudo he descubierto que estoy esperando a que se cargue. (No quiero utilizar onload porque no es confiable ).

¿Hay una mejor manera o una manera de decir "no esperes [...]"?

Nota: Por lo general, no puedo poner el código en una etiqueta <script> justo antes de la etiqueta </body> porque el sitio está basado en una plantilla. Normalmente solo puedo editar el "contenido" de la página.

Answer 1

¿Has intentado cargar Google Analytics desde la función de listo? Aquí hay un enlace que analiza la carga de scripts dinámicos. Presumiblemente, harías esto al final una vez que las otras partes de tu script listo ya se hubieran ejecutado.

Answer 2

Esto es solo una suposición, pero ¿has considerado setTimeOut ()?

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

setTimeOut () tiene la característica agradable de escapar de la pila de llamadas, por lo que podría resolver su problema.

Answer 3

Google ha lanzado lo que llaman 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>

Esto resuelve el problema porque solo se cargará una vez que se haya analizado DOM y, por lo tanto, ya puede usar todo en la página.

Answer 4

Tuve el mismo problema. Simplemente ponga esta línea al principio javascript load y funciona bien en IE después de eso:

jQuery.noConflict();

Answer 5

En la mayoría de los navegadores modernos ahora puede escribir:

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

La secuencia de comandos se cargará de forma asíncrona en la mayoría de los navegadores y se enfrentará a diferentes esquemas automágicamente.

Es posible que desee utilizar la versión más larga - más segura para los navegadores más antiguos -:

<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>

Algunos cuentos:

• hay un error en IE6 que impedirá que el JS se cargue debido al protocolo que falta (ver http://www.paulirish.com/2010/the-protocol-relative-url/ ) pero podrías agregar el protocolo que estás usando .
• los navegadores más antiguos no comprenderán la propiedad "asincrónica", por lo que se cargarán si se ofrecen (después de la carga de la página) o simplemente lo cargan cuando lo encuentran (por lo tanto, no son sincronizados).