¿Cómo está comprobando jQuery si el documento está cargado? ¿Cómo está verificando que la carga del documento haya finalizado?¿Cómo funciona la función de "documento listo" de jQuery?
Respuesta
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.
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.
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 :)
- 1. documento jQuery manejador listo
- 2. jQuery .live() y Documento listo
- 3. activando una función de cambio jQuery al documento listo
- 4. ; antes documento listo en jQuery
- 5. documento de jQuery listo después de la solicitud de ajax
- 6. orden de ejecución del documento jQuery listo
- 7. jquery documento listo en script externo
- 8. jQuery (documento). Listo para que DOM esté listo
- 9. Son $ (función() {}); y $ ("documento"). listo (función() {}); ¿lo mismo?
- 10. JQuery: ¿Por qué la función Discreta de JavaScript/Documento listo en lugar del evento OnClick?
- 11. ¿Cómo verificar si el documento está listo?
- 12. jQuery: recibir documento listo() en la ventana secundaria
- 13. jQuery NewBie Preguntas: ¿Cuál es el problema con $ (documento). (Listo)?
- 14. Async y documento listo
- 15. jQuery: el documento listo dispara demasiado pronto para mis requisitos
- 16. JQuery $ ('iframe'). ¿Listo por qué no funciona?
- 17. jQuery función de documento preparado
- 18. función listo jQuery se llama dos veces
- 19. carga de la ventana dentro de un documento listo?
- 20. ¿Cómo funciona la función jQuery pushStack?
- 21. está utilizando el documento de Javascript listo dos veces en un documento ¿está bien?
- 22. Alternativa para la función "$ (documento) .ready"
- 23. jQuery. Listo en un iframe insertado dinámicamente
- 24. ¿Cómo funciona la función mostrar/ocultar de jquery?
- 25. ¿Cómo funciona la función de animación jquery internamente?
- 26. La función jQuery ready no funciona en WordPress
- 27. jQuery: obtener div-width después de que el documento esté listo y renderizado
- 28. jquery declaración de función anónima significados
- 29. La devolución de datos de Async no causa que el documento esté listo para ejecutarse.
- 30. IE La función JQuery ready no funciona
gotta love jQuery! – turtlepick