Front-End Zen

Diferencia entre dom:loaded y window.onload

Uno de los métodos más potentes y usados para controlar los tiempos de carga y ejecución de nuestros scripts en la página, es el uso del Event.observe de Prototype.

Con la línea siguiente:

Event.observe(window, 'load', function() {});

Podremos ejecutar algo una vez la página esté completamente cargada. Muy útil si queremos asegurar por ejemplo que un div al que queremos interactuar está ya cargada en la página, o si queremos realizar cualquier acción tras la carga completa de la página. Esto es que están todos los elementos del DOM renderizados y todo el resto de elementos web cargados también: js, css e imágenes incluidos. Las peticiones AJAX no entrarían en este saco ya que son peticiones asíncronas y no se carga secuencialmente en el waterfall de la carga de la página.

Hasta aquí todo perfecto. Pero también tenemos otra condición que se usa mucho que es:

document.observe('dom:loaded', function(){});

Esta línea es muy similar a la anterior pero no son exactamente iguales. ¿En qué se diferencian?

Similares pero no iguales

¿Cuál es la diferencia? Pues en el caso del ‘dom:loaded’, éste avisa de cuándo están todos los elementos DOM cargados, independientemente de si están todas las imágenes descargadas.

Conocer la diferencia de estas dos técnicas de control de carga permitirá dominar con más precisión cómo y cuándo queremos ejecutar nuestros scripts, y podremos mejorar la velocidad de carga de la página, y prevenir posibles bugs.

Con jQuery es lo mismo

Antes he mencionado de los métodos que se usan en Prototype, pero con jQuery ocurre exactamente lo mismo. La sintaxis varía ligeramente, eso sí. La relación sería la siguiente:

// Carga del window.onload
// En Prototype
Event.observe(window, 'load', function() {});
// En jQuery
$(window).load(function(){});

// Carga del dom
// En Prototype
document.observe('dom:loaded', function(){});
// En jQuery
$(document).ready(function(){});

Los listeners son una herramienta muy potente, y no solo sirven para observar la carga de la página sino que se le puede dar muchos más usos.