El framework Javascript Mootools define un evento que vamos a utilizar infinidad de veces a lo largo del Manual de Mootools. Este método se puede asociar al objeto window, para ejecutar acciones cuando el DOM ha sido cargado por completo y está listo para poder hacer cualquier tipo de acciones con él.

Cuando tenemos el DOM Ready (DOM listo)

Bueno, sabemos que una página tiene un código HTML y además una serie de elementos externos, que se cargan aparte del propio código de la página. Si nuestra página es larga y contiene diversas imágenes, scripts, declaraciones de estilos u otros elementos que tengan cierto peso, puede tardar un buen tiempo hasta que todo ha terminado de cargarse.

En las aplicaciones web que tienen componentes del lado del cliente, que se ejecutan mediante Javascript, muchas veces se tienen que crear funciones de inicialización de esos componentes, para insertarlos en la página, posicionarlos, etc. Por ejemplo, podríamos desear ejecutar acciones Javascript para realizar una carga de datos por Ajax o para generar contenidos dinámicos en la página, insertando elementos como una barra de navegación generada automáticamente, un calendario o lo que podamos necesitar.

Todos estos componentes que se deben insertar dinámicamente en una página, en teoría, deben ser incluidos cuando el navegador está preparado para recibirlos. Esto es, cuando el DOM (la jerarquía de objetos del navegador a disposición de Javascript para alterar los elementos de la página) está cargado por completo en el navegador y listo para ser alterado.

Quien conozca las bases de Javascript sabrá que existe un evento "onload", que sirve para ejecutar acciones cuando se termina la carga de la página. Pero este evento se ejecuta cuando TODOS los elementos de la página han terminado de cargarse, es decir, la propia página y todo lo que tenga, como imágenes, banners y otro tipo de recursos externos. Así que, si nuestra página tiene, por ejemplo, muchas imágenes muy pesadas, puede que onload tarde demasiado en ejecutarse y hasta entonces no se mostrarían los elementos que se desean insertar dinámicamente.

Pero mucho antes que finalice esa carga de elementos externos, la página podría haber estado lista para ejecutar acciones Javascript que alteren el DOM. En concreto, cuando una página termina de cargarse y procesarse, aunque se continúen descargando imágenes o elementos externos, el DOM estará listo para realiza acciones.

Cómo utilizar el evento domready de mootools

Espero que las explicaciones anteriores se hayan entendido. En resumen, domready es un evento que se ejecuta cuando la página está lista para realizar acciones que afecten al DOM, es decir, cuando el DOM está listo. Debe quedar claro que el DOM puede estar listo mucho antes que se terminen de cargar todos los elementos de la página, sobretodo si la página tiene imágenes o elementos externos que ocupen mucho espacio en bytes.

Entonces, para ejecutar acciones cuando el DOM está listo en Mootools se hace esto:

window.addEvent('domready', function() {
   //aquí las acciones que quieras realizar cuando el DOM esté listo
   alert ("Ahora el DOM está listo");
});

Eso es todo. Simplemente con este código podemos incluir todas las acciones que necesitemos para ejecutarlas sólo en el momento que el DOM esté listo.

Importante: El evento domready sólo se puede utilizar con el objeto window del navegador. Para vuestra referencia, la declaración del evento domready se encuentra dentro del paquete Utilities/DomReady.

Aquí puede verse un ejemplo de uso del evento domready de mootools.