Pregunta window.onload vs $ (document) .ready ()


¿Cuáles son las diferencias entre JavaScript window.onload y jQuery's $(document).ready() ¿método?


1086
2017-09-13 06:24


origen


Respuestas:


los ready evento se produce después de que se haya cargado el documento HTML, mientras que el onload el evento ocurre más tarde, cuando todo el contenido (por ejemplo, imágenes) también se ha cargado.

los onload evento es un evento estándar en el DOM, mientras que el ready evento es específico de jQuery. El propósito de ready El evento es que debe ocurrir tan pronto como sea posible después de que el documento se haya cargado, de modo que el código que agrega funcionalidad a los elementos en la página no tiene que esperar a que se cargue todo el contenido.


1110
2017-09-13 06:28



window.onload es el evento JavaScript incorporado, pero como su implementación tuvo sutil peculiaridades en los navegadores (Firefox, Internet Explorer 6, Internet Explorer 8 y Ópera), jQuery proporciona document.ready, que los abstrae y se activa tan pronto como el DOM de la página esté listo (no espera las imágenes, etc.).

$(document).ready (tenga en cuenta que es no  document.ready, que no está definido) es una función jQuery, que envuelve y proporciona consistencia a los siguientes eventos:

  • document.ondomcontentready / document.ondomcontentloaded - un evento nuevo que se activa cuando se carga el DOM del documento (que puede ser un tiempo antes de las imágenes, etc. están cargadas); de nuevo, ligeramente diferente en Internet Explorer y en el resto del mundo
  • y window.onload (que se implementa incluso en navegadores antiguos), que se dispara cuando se carga toda la página (imágenes, estilos, etc.)

123
2017-09-13 06:30



$(document).ready() es un evento jQuery. JQuery's $(document).ready() El método se llama tan pronto como el DOM esté listo (lo que significa que el navegador ha analizado el HTML y construido el árbol DOM). Esto le permite ejecutar código tan pronto como el documento esté listo para ser manipulado.

Por ejemplo, si un navegador admite el evento DOMContentLoaded (como lo hacen muchos navegadores que no son IE), se activará ese evento. (Tenga en cuenta que el evento DOMContentLoaded solo se agregó a IE en IE9 +).

Se pueden usar dos sintaxis para esto:

$( document ).ready(function() {
   console.log( "ready!" );
});

O la versión abreviada:

$(function() {
   console.log( "ready!" );
});

Puntos principales para $(document).ready():

  • No esperará a que se carguen las imágenes.
  • Se usa para ejecutar JavaScript cuando el DOM está completamente cargado. Pon los controladores de eventos aquí.
  • Puede ser usado múltiples veces.
  • Reemplazar $ con jQuery cuando recibe "$ no está definido".
  • No se usa si quieres manipular imágenes. Utilizar $(window).load() en lugar.

window.onload() es una función nativa de JavaScript. los window.onload() el evento se desencadena cuando se ha cargado todo el contenido de la página, incluido el DOM (modelo de objetos del documento), los anuncios de banner y las imágenes. Otra diferencia entre los dos es que, si bien podemos tener más de uno $(document).ready() función, solo podemos tener uno onload función.


78
2017-08-20 16:00



UN Carga de Windows el evento se dispara cuando todo el contenido de la página está completamente cargado, incluido el contenido DOM (modelo de objetos del documento) y JavaScript asincrónico, marcos e imágenes. También puedes usar body onload =. Ambos son lo mismo; window.onload = function(){}y <body onload="func();"> son diferentes maneras de usar el mismo evento.

jQuery $document.ready evento de función se ejecuta un poco antes que window.onload y se llama una vez que el DOM (Modelo de objeto de documento) se carga en su página. No esperará a que el imágenes, marcos para obtener la carga completa.

Tomado del siguiente artículo: cómo $document.ready() es diferente de window.onload()


38
2017-09-17 07:09



Una palabra de advertencia sobre el uso $(document).ready() con Internet Explorer. Si se interrumpe una solicitud HTTP antes de se carga todo el documento (por ejemplo, mientras una página se transmite al navegador, se hace clic en otro enlace) IE activará el $(document).ready evento.

Si hay algún código dentro del $(document).ready() el evento hace referencia a objetos DOM, existe la posibilidad de que esos objetos no se encuentren y pueden ocurrir errores de Javascript. Guarde sus referencias a esos objetos o difiera el código que hace referencia a esos objetos al evento window.load.

No he podido reproducir este problema en otros navegadores (específicamente, Chrome y Firefox)


21
2017-08-27 18:56



$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


18
2018-02-26 12:30



Eventos

$(document).on('ready', handler) se une al evento listo de jQuery. El manejador se llama cuando el DOM está cargado. Bienes como las imágenes tal vez aún faltan. Nunca se llamará si el documento está listo en el momento de la vinculación. jQuery usa el DOMContentLoaded-Event para eso, emularlo si no está disponible.

$(document).on('load', handler) es un evento que será despedido una vez que todos los recursos están cargados del servidor Las imágenes se cargan ahora. Mientras onload es un evento HTML sin formato, Listo está construido por jQuery.

Funciones

$(document).ready(handler) en realidad es un promesa. Se llamará inmediatamente al controlador si el documento está listo en el momento de la llamada. De lo contrario, se une a la ready-Evento.

Antes de jQuery 1.8, $(document).load(handler) existió como un alias de $(document).on('load',handler).

Otras lecturas


15
2018-06-02 10:38



window.onload:  Un evento normal de JavaScript.

document.ready:  Un evento jQuery específico cuando se ha cargado todo el HTML.


11
2018-03-03 06:52



Document.ready (un evento jQuery) se activará cuando todos los elementos estén en su lugar, y se les puede hacer referencia en el código JavaScript, pero el contenido no se carga necesariamente. Document.ready se ejecuta cuando se carga el documento HTML.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

los window.load sin embargo, esperará a que la página se cargue por completo. Esto incluye marcos interiores, imágenes, etc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

11
2017-11-07 20:54