Diferencia entre Window.onload y $(document).ready()

Diferencia entre window.onload y $(document).ready(). En algún punto, cuando estemos desarrollando un sistema tendremos que elegir entre dos opciones que da el mismo resultado. Sin embargo, en este artículo veremos las diferencias notorias entre estos dos eventos.

En algunos casos vamos a necesitar saber cuándo se ha cargado nuestro contenido al 100% para comenzar con las animaciones u otros eventos dentro de nuestro sistema web. Sin embargo, jQuery nos ofrece la opción de controlar la carga de nuestra web.

Diferencia entre Window.onload y $(document).ready()

Diferencia entre Window.onload y document ready
Diferencia entre Window.onload y document ready

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

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

El evento onload es un evento estándar en el DOM, mientras que el evento ready es específico de jQuery. El propósito del evento ready es que se produzca 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.

La diferencia la explica claramente jQuery en su documentación en inglés, tarducida al español.

Una página puede ser manipulada sin riesgo de errores solamente cuando el documento está listo. jQuery se encarga de detectar dicho estado en nuestro lugar. El código incluido dentro de $( document ).ready() se ejecutará solamente cuando el Modelo de Objetos del Documento (DOM) esté listo para ejecutar código Javascript. Por su parte, el código incluido después de $( window ).on( "load", function() { ... }) se ejecutará solamente cuando la página entera (imágenes o iframes), no solamente el DOM, esté lista.

Fuente: jQuery learning center : Traducción al castellano.

window.onload()

El evento onload, cuya abreviatura es load se dispara al final del proceso de carga del documento. Es decir, cuando todos los objetos del DOM (imágenes, flash, scripts, frames) han terminado de cargarse. Una excepción son las hojas de estilo, que no siempre están cargadas al momento de lanzarse este evento.

$(window).load(function(){
  alert('Window load');
});

 $(document).ready()

jQuery document.ready se ejecuta cuando todo el contenido HTML está listo, pero antes de las imágenes y otros recursos. En los navegadores modernos, es reemplazado por DOMContentLoaded.

$(document).ready(function(){
  alert('Document ready');
});

CONCLUSIÓN: Diferencia entre Window.onload

Recordemos que ambos eventos se ejecutan cuando el sistema que estemos trabajando se ha cargado al 100%. Por lo tanto, la única diferencia radica en los elementos que están disponibles cuando se ejecuta su código.

Para el caso de Document ready, se ejecuta cuando se ha cargado el código HTML y el DOM está listo. Pero ¿qué pasa si lo que queremos controlar es un frame, una imagen o algún tipo de objeto? Pues que debemos echar mano de Window load, ya que este evento se ejecuta cuando todos los elementos que conforman la web se han cargado por completo.

Si vamos a trabajar con los elementos que componen la web (divs, inputs, etc) usaremos el metodo de $(document).ready(). Sin embargo, si vamos a trabajar con imágenes para alinearlas o comprobar sus tamaños podriamos usar $(window).load().

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *