[Resuelto] [Pregunta]: Window ready y Document ready ¿Diferencias?

[Leguim]

Básicamente eso,
cuales son las diferencias entre usar la función que tiene jquery ($(window).ready(function()) y ($(document).ready(function()) ya que no me termina de quedar muy en claro, si se pudiera también me interesaría entender cual es la diferencia entre un document load y un document ready.

¡Muchas gracias!

[engel lex]

$(document).ready será llamado cuando la pagine cargue todos los elementos html que le correspondan al DOM, esto por ejemplo no incluye los frames o iframes, ya que eso corresponde a su propio documento, en cambio $(window).ready esperará a TODO estar cargado

document load esperará a que carguen las imagenes y todo el contenido incluido, por otro lado un document ready se disparará cuando se cargue lo correspondiente al DOM (no necesariamente su contenido)

[Leguim]

$(document).ready será llamado cuando la pagine cargue todos los elementos html que le correspondan al DOM, esto por ejemplo no incluye los frames o iframes, ya que eso corresponde a su propio documento, en cambio $(window).ready esperará a TODO estar cargado

document load esperará a que carguen las imagenes y todo el contenido incluido, por otro lado un document ready se disparará cuando se cargue lo correspondiente al DOM (no necesariamente su contenido)

$(window).ready digamos al cargar todo también esperará a que carguen las imagenes?

[engel lex]

$(window).ready digamos al cargar todo también esperará a que carguen las imagenes?

puedes hacer la prueba...

pero no, en general el ready es que todos los componentes está listos para ser usados/manipulados en lo que en general se refiere al famoso "DOM", esto no incluye el contenido de cosas como las imagenes...

el onload indica que el contenido fue (des)cargado, basicamente se llama cuando ya todas las llamadas iniciales fueron cerradas

[@XSStringManolo]

https://developer.mozilla.org/es/docs/Web/API/GlobalEventHandlers
https://developer.mozilla.org/es/docs/Web/API/GlobalEventHandlers/onload
https://developer.mozilla.org/en-US/docs/Web/Events
Esta muy bien la documentación de Mozilla. Guárdatela en favoritos porque te ahorrará mucho tiempo.

[Leguim]

¡Muchas gracias otra vez a los dos!

[MinusFour]

$(window).ready y $(document).ready son exactamente igual. De hecho, el .ready de jQuery usa ambos eventos, DOMContentLoaded y load. El .ready de  jquery también sigue disparando los handlers una vez que el documento este cargado, mientras que las APIs nativas solo disparan los handlers registrados antes de que ocurra el evento.

[EdePC]

Saludos,

- Siempre se puede utilizar las herramientas de desarrollador del navegador web, por ejemplo en Chrome está el apartado Performance que muestra los tiempos de carga de todos los elementos de la página web.



- Se puede ver bien claro el tiempo de carga del DOM (evento DOMContentLoaded del document) en azul, y el Window Onload (evento load de window) en rojo. Onload se espera a que la imagen se termine de cargar.

- jQuery por defecto usa DOMContentLoad de document y como fallback el load de window, luego quita el evento cuando alguno de estos se ejecuta, es decir, el load de window es un "seguro" que se descarta si DOMContentLoad Funcionó:

Código (javascript) [Seleccionar] Expandir

// The ready event handler and self cleanup method
function completed() {
document.removeEventListener( "DOMContentLoaded", completed );
window.removeEventListener( "load", completed );
jQuery.ready();
}

// Catch cases where $(document).ready() is called
// after the browser event has already occurred.
// Support: IE <=9 - 10 only
// Older IE sometimes signals "interactive" too soon
if ( document.readyState === "complete" ||
( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );

} else {

// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed );

// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );
}