ventana.onload vs $(documento).ready()
¿Cuáles son las diferencias entre el método de JavaScript window.onloady jQuery ?$(document).ready()
El readyevento ocurre después de que se haya cargado el documento HTML, mientras que el onloadevento ocurre más tarde, cuando también se ha cargado todo el contenido (por ejemplo, imágenes).
El onloadevento es un evento estándar en el DOM, mientras que el readyevento es específico de jQuery. El propósito del readyevento es que ocurra lo antes posible después de que se haya cargado el documento, de modo que el código que agrega funcionalidad a los elementos de la página no tenga que esperar a que se cargue todo el contenido.
window.onloades el evento JavaScript incorporado, pero como su implementación tenía peculiaridades sutiles en todos los navegadores (Firefox, Internet Explorer 6, Internet Explorer 8 y Opera ), jQuery proporciona document.ready, que los abstrae y se activa tan pronto como el DOM de la página está listo. (no espera imágenes, etc.).
$(document).ready(tenga en cuenta que no es document.ready, que no está definido) es una función de jQuery, que envuelve y proporciona coherencia a los siguientes eventos:
DOMContentLoaded- un evento nuevo que se activa cuando se carga el DOM del documento (que puede pasar algún tiempo antes de que se carguen las imágenes, etc.); 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 activa cuando se carga toda la página (imágenes, estilos, etc.)
$(document).ready()es un evento jQuery. El método de JQuery $(document).ready()se llama tan pronto como el DOM está listo (lo que significa que el navegador analizó el HTML y creó 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á en ese evento. (Tenga en cuenta que el evento DOMContentLoaded solo se agregó a IE en IE9+).
Para ello se pueden utilizar dos sintaxis:
$( 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 utiliza para ejecutar JavaScript cuando el DOM está completamente cargado. Coloque aquí los controladores de eventos.
- Puede ser usado múltiples veces.
- Reemplace
$conjQuerycuando reciba "$ no está definido". - No se utiliza si desea manipular imágenes. Úselo
$(window).load()en su lugar.
window.onload()es una función nativa de JavaScript. El window.onload()evento se activa cuando se ha cargado todo el contenido de su página, incluido el DOM (modelo de objetos de documento), anuncios publicitarios e imágenes. Otra diferencia entre ambos es que, si bien podemos tener más de una $(document).ready()función, solo podemos tener una onloadfunción.
