elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] [Pregunta]: Window ready y Document ready ¿Diferencias?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] [Pregunta]: Window ready y Document ready ¿Diferencias?  (Leído 1,248 veces)
Leguim


Desconectado Desconectado

Mensajes: 673



Ver Perfil
[Resuelto] [Pregunta]: Window ready y Document ready ¿Diferencias?
« en: 14 Septiembre 2019, 03:50 am »

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!


« Última modificación: 24 Septiembre 2019, 10:49 am por #!drvy » En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.458



Ver Perfil
Re: [Pregunta]: Window ready y Document ready ¿Diferencias?
« Respuesta #1 en: 14 Septiembre 2019, 04:45 am »

$(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)


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Leguim


Desconectado Desconectado

Mensajes: 673



Ver Perfil
Re: [Pregunta]: Window ready y Document ready ¿Diferencias?
« Respuesta #2 en: 14 Septiembre 2019, 05:13 am »

$(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?
En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.458



Ver Perfil
Re: [Pregunta]: Window ready y Document ready ¿Diferencias?
« Respuesta #3 en: 14 Septiembre 2019, 10:33 am »

$(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
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: Window ready y Document ready ¿Diferencias?
« Respuesta #4 en: 14 Septiembre 2019, 11:43 am »

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.
En línea

Leguim


Desconectado Desconectado

Mensajes: 673



Ver Perfil
Re: [Pregunta]: Window ready y Document ready ¿Diferencias?
« Respuesta #5 en: 14 Septiembre 2019, 12:55 pm »

¡Muchas gracias otra vez a los dos!
En línea

MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.165


I'm fourth.


Ver Perfil WWW
Re: [Pregunta]: Window ready y Document ready ¿Diferencias?
« Respuesta #6 en: 14 Septiembre 2019, 16:59 pm »

$(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.
En línea

EdePC
Moderador Global
***
Conectado Conectado

Mensajes: 1.751



Ver Perfil
Re: [Pregunta]: Window ready y Document ready ¿Diferencias?
« Respuesta #7 en: 15 Septiembre 2019, 03:16 am »

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
  1. // The ready event handler and self cleanup method
  2. function completed() {
  3. document.removeEventListener( "DOMContentLoaded", completed );
  4. window.removeEventListener( "load", completed );
  5. jQuery.ready();
  6. }
  7.  
  8. // Catch cases where $(document).ready() is called
  9. // after the browser event has already occurred.
  10. // Support: IE <=9 - 10 only
  11. // Older IE sometimes signals "interactive" too soon
  12. if ( document.readyState === "complete" ||
  13. ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
  14.  
  15. // Handle it asynchronously to allow scripts the opportunity to delay ready
  16. window.setTimeout( jQuery.ready );
  17.  
  18. } else {
  19.  
  20. // Use the handy event callback
  21. document.addEventListener( "DOMContentLoaded", completed );
  22.  
  23. // A fallback to window.onload, that will always work
  24. window.addEventListener( "load", completed );
  25. }

En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines