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:
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.
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:
- Evento DOMContentLoaded de Firefox
- Evento onreadystatechange de Internet Explorer
- DOM cargado y listo en Internet Explorer
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...