Saber cuando el DOM está listo sin utilizar onload

  • Por
Notas para ejecutar código Javascript solamente cuando el navegador está preparado porque el DOM está listo, pero de una manera más rápida que usar onload.
He estado haciendo unas pruebas con los eventos onreadystatechange y DOMContentLoaded. Puesto que quería resolver un problema relacionado con Internet Explorer, debido a un intento de ejecutar código que alteraba el DOM, antes que este estuviera listo. Ver FAQ: Internet Explorer no puede abrir el sitio.

Generalmente los scripts Javascript que afectan a la estructura del DOM se tienen que ejecutar cuando la página se ha cargado. Con el evento onload de Javascript se ejecutan acciones cuando todos los elementos de la página se hayan descargado y mostrado por completo en el documento. Pero si tenemos que esperar a que toda la página cargue, incluidos todos los archivos externos, puede se retrase demasiado la ejecución de sentencias que sean necesarias para el funcionamiento de la página.

Por ejemplo, si la página tiene muchas imágenes y muy pesadas, pues tardarán en descargarse y por tanto se retrasará mucho la ejecución del evento onload. Para resumir estas inicializaciones, en realidad, con esperar a que el DOM se haya cargado es más que suficiente.

Solución para detectar cuándo se ha inicializado el DOM

En Internet, después de hacer una investigación más o menos profunda, he visto que hay bastante jaleo con este asunto, debido a que la propiedad readyState no funciona en Firefox. Después de buscar por muchos sitios he dado con la solución en el artículo publicado en

The window.onload Problem – Solved!

Dado que el mencionado artículo está en inglés, vamos a ofrecer aquí unas indicaciones que puedan servir de guía a los usuarios de DesarrolloWeb.com.

Hemos dividido las explicaciones en varios puntos que debéis conocer antes de continuar leyendo este artículo: En los artículos anteriores hemos visto en dos modos de detectar el momento en el que el DOM está listo, tanto para Internet Explorer como para Firefox

Ejemplo completo de DOM Ready

La solución completa se puede ver en un código como este:

<html>
<head>
   <title>Ejecutar acciones cuando el DOM del navegador está listo (dom ready)</title>
</head>

<body>

<div id="hola">Probando....</div>

<img src=5457.jpg width="100" height="100">

<script>

// Para firefox
if (document.addEventListener) {
   document.addEventListener("DOMContentLoaded", inicializar, false);
}

function inicializar(){
   var capa = document.getElementById("hola");
   capa.innerHTML="<p>hola, el dom está listo</p>";
}   

</script>

<!--[if IE]><script defer src="onload.ie.js"></script><![endif]-->

</body>
</html>


Sin olvidarnos que en el mismo directorio debe estar el archivo onload.ie.js, que sólo tendría una llamada a la función inicializar().

Podemos ver el ejemplo en marcha en una página aparte.

Mucho más fácil con Mootools

Este ejemplo se ha complicado, puede que demasiado para lo básico que resulta el tema. Esto es debido a las incompatibilidades entre navegadores y lo experimentaremos, por desgracia, muy a menudo cuando trabajamos con el DOM. Pero para simplificarnos la tarea podemos utilizar alguno de los distintos frameworks Javascript. En desarrollo web .com hemos publicado un artículo en el que podréis daros cuenta de lo fácil que sería esto mismo con Mootools es mucho más fácil, como podemos ver en el siguiente artículo: Evento domready de Mootools.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir