Como o evento window.onload precisa ser executado após todo o conteúdo da página (incluindo imagens, etc.) ser carregado, geralmente preferimos executar o script assim que o DOM for carregado. Na verdade, a maioria dos navegadores convencionais (Firefox 3+, Opera 9+, Safari 3+, Chrome 2+) fornecem este método de evento: addDOMLoadEvent.
document.addEventListener("DOMContentLoaded", init, false);
Então, como simulamos o evento addDOMLoadEvent para o IE?
Matthias Miller primeiro forneceu a seguinte solução:
// para Internet Explorer (usando comentários condicionais)
/*@cc_on @*/
/*@se (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)></script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange=função(){
if (this.readyState == "completo") {
init(); //chama o manipulador onload
}
};
/*@fim @*/
Diego Perini posteriormente forneceu uma solução que usa o método doScroll() para simular o evento addDOMLoadEvent, e esta solução é basicamente adotada pelos principais frameworks JavaScript (JQuery, YUI, etc.).
O princípio é basicamente o seguinte:
Quando o evento ondocumentready é acionado, o documento (documento) foi totalmente analisado e criado. Se o componente precisar manipular a estrutura original do documento, o código de inicialização deverá ser colocado depois disso. O evento ondocumentready informa ao componente que a página inteira foi carregada e é acionado imediatamente antes do evento onload do documento inicial ser acionado.
Alguns métodos, como doScroll, exigem que o documento original esteja totalmente carregado. Se esses métodos fizerem parte da função de inicialização, eles serão executados quando o evento ondocumentready for acionado.
/*
*
*IEContentLoaded.js
*
* Autor: Diego Perini (diego.perini em gmail.com) NWBOX Srl
* Resumo: emulação DOMContentLoaded para navegadores IE
* Atualizado: 10/05/2007
* Licença: GPL/CC
* Versão: A definir
*
*/
// @w referência da janela
// @fn
função de referênciafunção IEContentLoaded (w, fn) {
var d = w.document, concluído = falso,
// dispara apenas uma vez
inicialização = função () {
if (!concluído) {
feito = verdadeiro;
fn();
}
};
// pesquisando se não há erros
(função () {
tentar {
// lança erros até depois de ondocumentready
d.documentElement.doScroll('esquerda');
} pegar (e) {
setTimeout(argumentos.callee, 50);
retornar;
}
// sem erros, dispara
iniciar();
})();
//tentando sempre disparar antes de onload
d.onreadystatechange = function() {
if (d.readyState == 'completo') {
d.onreadystatechange = null;
iniciar();
}
};
}