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

¿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().