DOM cargado y listo en Internet Explorer

  • Por
Un truco en Internet Explorer para detectar el momento en el que el DOM está listo para trabajar y recibir instrucciones.
Hay ciertas instrucciones de Javascript que hacen trabajo con el DOM que se deben ejecutar sólo cuando éste esté totalmente cargado y listo para recibir instrucciones. Esto es así con cualquier navegador, pero Internet Explorer hasta puede dar errores graves si recibe comandos para alterar el DOM antes de que esté preparado. Esto lo hemos comentado en una FAQ publicada anteriormente: Error Internet Explorer no puede abrir el sitio.

En este artículo de DesarrolloWeb.com vamos a mostrar un pequeño truco que sirve para ejecutar instrucciones justo cuando el DOM está listo, sin tener que utilizar el evento onload, que nos obligaría a esperar hasta que todos los archivos de la página estuvieran cargados. La mejoría de rapidez con respecto a onload es mayor cuanto más ocupen los archivos externos, como imágenes, frames, etc.

Referencia: Leer los primeros artículos del Taller de programación DOM Javascript para obtener más información sobre el DOM y por qué debemos trabajar con él cuando esté listo.

Para hacer esto, simplemente tenemos que utilizar un archivo externo con código Javascript y ponerle a la etiqueta script el atributo defer.

<script defer src="onload.ie.js"></script>

El atributo defer, que funciona sólo en Explorer, sirve para indicar que este script externo se tiene que cargar cuando el DOM está listo.

En ese script externo simplemente colocaríamos una llamada a cualquier función que necesitemos, que se encargue de inicializar la página y trabajar con el DOM.

inicializar();

O bien, las instrucciones que deseemos que se ejecuten una vez el DOM está listo.

Pero el problema es que todos los navegadores leerán este script y lo ejecutarán, sin tener en cuenta el atributo defer, que sólo lo entiende Internet Explorer. Esto podría dar problemas, así que tenemos que hacer algo para que ese script sólo se cargue para IExplorer.

Simplemente habría que colocarlo en comentarios condicionales de HTML, que también sólo entiende el Explorer:

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

Esto será ejecutado por Internet Explorer, pero por ningún otro navegador, que lo interpretará como un comentario cualquiera.

El tema tratado en este texto se queda un poco corto, puesto que sólo sirve para Internet Explorer. La manera de detectar el momento en el que el DOM está listo para Firefox la hemos visto en el artículo Evento DOMContentLoaded de Firefox

En el siguiente artículo de desarrolloweb.com pondremos todo junto y explicaremos el modo de detectar el DOM ready en Firefox e Internet Explorer a la vez.