Dado que el evento window.onload debe ejecutarse después de cargar todo el contenido de la página (incluidas imágenes, etc.), a menudo preferimos ejecutar el script tan pronto como se carga el DOM. De hecho, la mayoría de los navegadores convencionales (Firefox 3+, Opera 9+, Safari 3+, Chrome 2+) proporcionan este método de evento: addDOMLoadEvent.
document.addEventListener("DOMContentLoaded", init, false);
Entonces, ¿cómo simulamos el evento addDOMLoadEvent para IE?
Matthias Miller primero proporcionó la siguiente solución:
// para Internet Explorer (usando comentarios condicionales)
/*@cc_on @*/
/*@si (@_win32)
document.write("");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = función() {
if (this.readyState == "completo") {
init(); // llama al controlador de carga
}
};
/*@fin @*/
Más tarde, Diego Perini proporcionó una solución que utiliza el método doScroll() para simular el evento addDOMLoadEvent, y esta solución es básicamente adoptada por los marcos de JavaScript convencionales (JQuery, YUI, etc.).
El principio es básicamente el siguiente:
Cuando se activa el evento ondocumentready, el documento (documento) se ha analizado y creado por completo. Si el componente necesita manipular la estructura del documento original, el código de inicialización debe colocarse después de esto. El evento ondocumentready le dice al componente que se ha cargado toda la página y se activa inmediatamente antes de que se active el evento onload del documento inicial.
Algunos métodos, como doScroll, requieren que el documento original esté completamente cargado. Si estos métodos son parte de la función de inicialización, se ejecutarán cuando se active el evento ondocumentready.
/*
*
*IEContentLoaded.js
*
* Autor: Diego Perini (diego.perini en gmail.com) NWBOX Srl
* Resumen: emulación DOMContentLoaded para navegadores IE
* Actualizado: 10/05/2007
* Licencia: GPL/CC
* Versión: Por determinar
*
*/
// @w referencia de ventana
// @fn
función de referenciafunción IEContentLoaded (w, fn) {
var d = w.document, hecho = falso,
// solo dispara una vez
inicio = función () {
si (!hecho) {
hecho = verdadero;
fn();
}
};
// sondeo para que no haya errores
(función () {
intentar {
// arroja errores hasta que esté listo el documento
d.documentElement.doScroll('izquierda');
} atrapar (e) {
setTimeout(argumentos.callee, 50);
devolver;
}
// sin errores, fuego
inicio();
})();
// intentando disparar siempre antes de cargar
d.onreadystatechange = función() {
if (d.readyState == 'completo') {
d.onreadystatechange = nulo;
inicio();
}
};
}