¿Cómo funciona la función de "documento listo" de jQuery?

Question

¿Cómo está comprobando jQuery si el documento está cargado? ¿Cómo está verificando que la carga del documento haya finalizado?

Answer 1

Mira la función bindReady en el source code.

Se enlazan al evento DOMContentLoaded (o onreadystatechange en algunos navegadores). También tienen una alternativa al evento de carga normal, en caso de que DOMContentLoaded no sea compatible o no se active por otros motivos. En los navegadores que lo apoyan, que utilizan esta llamada:

document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

en IE < 9:

document.attachEvent("onreadystatechange", DOMContentLoaded); 

La segunda instancia de DOMContentLoaded en estas llamadas es su propia función - en realidad una referencia a la ready función correcta arriba de bindReady en el código fuente. Esta función comprobará que el árbol DOM se hace realmente marcando document.body. Si aún no existe, esperan un milisegundo (usando setTimeout) y lo vuelven a comprobar. Cuando document.body existe, atraviesa la lista de devoluciones de llamada que ha establecido.

Answer 2

jQuery no hace nada que JavaScript no pueda/no haga, es simplemente un framework/biblioteca de JavaScript. Lo que hace es proporcionar envolturas alrededor de los eventos de JavaScript que implementan los navegadores, tales como onload ($.load()) y DOMContentLoaded ($.ready()). Por supuesto, hay un montón de trabajo bajo el capó que intenta hacer que este comportamiento sea lo más estándar posible en los navegadores y funciona en torno a los errores del navegador, problemas e incompatibilidades.

Por ejemplo, IE realmente no admite DOMContentLoaded antes de IE 9 pero jQuery tiene que proporcionar una implementación para él. Es posible que desee ver estos enlaces a entender más acerca de lo que este evento es y cómo se podría implementar algo similar, incluso sin jQuery:

• http://api.jquery.com/ready/#comment-85629494
• http://www.zachleat.com/web/domcontentloaded-inconsistencies/
• http://www.kryogenix.org/days/2007/09/26/shortloaded
• $(document).ready equivalent without jQuery

Si realmente desea ver lo que está haciendo jQuery, debe consultar jQuery source.

Answer 3

así que hay un poco pasando detrás de las escenas, pero esta es la esencia de la misma, directamente de la fuente de jQuery:

// Mozilla, Opera and webkit nightlies currently support this event 
     if (document.addEventListener) { 
      // Use the handy event callback 
      document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

      // A fallback to window.onload, that will always work 
      window.addEventListener("load", jQuery.ready, false); 

     // If IE event model is used 
     } else if (document.attachEvent) { 
      // ensure firing before onload, 
      // maybe late but safe also for iframes 
      document.attachEvent("onreadystatechange", DOMContentLoaded); 

      // A fallback to window.onload, that will always work 
      window.attachEvent("onload", jQuery.ready); 

      // If IE and not a frame 
      // continually check to see if the document is ready 
      var toplevel = false; 

      try { 
       toplevel = window.frameElement == null; 
      } catch(e) {} 

      if (document.documentElement.doScroll && toplevel) { 
       doScrollCheck(); 
      } 
     } 

Así que para la mayoría de los navegadores (Mozilla, Opera y Webkit) hay una DOMContentLoaded evento que jQuery está escuchando, cuando se activa, llama a todos los controladores listos que haya registrado con jQuery.

IE actúa un poco diferente, ya que no tienen el evento DOMContentLoaded, intentan enganchar en el caso de onreadystatechange el documento, también se enganchan caso window.onload, así como hacer un poco furtivos de código en el que continuamente intente desplazarse por la página cada milisegundo (doScrollCheck). Cualquiera que sea el primero de estos incendios desencadena los manipuladores listos y los sucesos posteriores se ignoran.

Espero que tenga sentido y lo ayude :)