Evento body onReady sem o uso de libs (DOM)
Terça-feira, Novembro 13th, 2007 by micoxAberta novamente a temporada de postagens heheh.
Um serviço que eu estava fazendo maneirou e acho que posso voltar a ser mais periódico aqui no blog.
Bora lá com o on ready. Leia até o final 
Bom, grande parte da malandragem que lê este blog usa frameworks e, portanto, devem conhecer as facilidades de uma função/evento on ready. Quem não conhece, vai achar esta postagem muito útil.
Perceba que não estou falando do onreadystate do AJAX nem do onready de iframes e afins, mas de onready no javascript. Continue lendo que entenderá.
Vou copiar aqui algumas descrições do que é o ‘on Ready’ pra não ter que ficar
definindo tudo novamente:
[…] Ready é semelhante ao onload do body, porém ele não
espera carregar imagens e objects, ou seja, assim que estiver carregado todo o HTML ela é executada! Muito útil! […] - jQuery Introdução - Felipe Diesel
[…]onReady é um método automaticamente chamado quando o DOM estiver completamente carregado, garantindo que todos os elementos referenciados na sua aplicação estarão disponíveis quando o script rodar. […] ( Introdução à bibliteca EXTjs - Fábio Vedovelli )
Nós usamos constantemente o ‘window.onload’ ou o ‘body.onload’ pra dizer que devemos iniciar a execução do nosso script. Porém, o evento onload espera tooooooda a tonelada de imagens/objetos/etc serem carregados antes de ser disparado.
Carambola, na imensa maioria das vezes nós precisamos apenas que os elementos HTML estejam carregados. É isso que o on ready faz! Que legal, dãã!
Em muitas bibliotecas este evento já está incluso (EXTjs e jQuery por exemplo), porém quem não usa bibliotecas ou cujas bibliotecas não tem o onready ficam a ver navios.
Tadáaaa: o Mico tem a solução!
“Chega de papo mico, você nunca foi de papo. Mostra logo um exemplo e o maldito script pra onload pra quem não usa bibliotecas.”
<script>
//vai funcionar rapidão pois não precisa esperar a imagem, só o carregamento do HTML
bodyOnReady(function(){
alert('bodyOnReady ' + document.getElementById('teste').innerHTML)
})
//vai funcionar beleza, mas só depois que tooodos os elementos forem carregados
window.onload = function(){
alert('onload ' + document.getElementById('teste').innerHTML)
}
//vai dar erro pois o elemento 'teste' ainda não foi criado
alert('alert simples ' + document.getElementById('teste').innerHTML)
</script>
<body>
<img src='http://img119.imageshack.us/img119/4050/no20matinhoue1.jpg' alt='imagem (relativamente) grande' />
<div id='teste'>conteúdo da div</div>
</body>
Entenderam a parada aí? Pois é.
“Mas cadê a função bodyOnReady Mico? A parada aí não funcionou pois tá faltando a função bodyOnReady” - Calma, está abaixo. É só adicioná-la em seu script e usar conforme a sintaxe passada no exemplo acima.
function bodyOnReady(func){
//call the function 'func' when DOM loaded
//Version 2.0 - 03/03/2008 - based on Jquery bindReady
//by Micox - www.elmicox.com - elmicox.blogspot.com - webly.com.br
//http://www.elmicox.com/2007/evento-body-onready-sem-o-uso-de-libs/
if(document.addEventListener && navigator.appName.indexOf('Opera')<0){ //FF
document.addEventListener( "DOMContentLoaded", func, false );
}else if(navigator.appName.indexOf('Internet Explorer')>=0){ //IE
try { // by Diego Perini - http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
func();
} catch( error ) {
setTimeout( arguments.callee, 20 );
return
}
}else if(navigator.appName.indexOf('Opera')>=0){
document.addEventListener( "DOMContentLoaded", function () {
for (var i = 0; i < document.styleSheets.length; i++){
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
}
func();
}, false);
}
}Várias tentativas de fazer o onready também estão disponíveis na net se
quiserem testar. Esta aqui é só a minha versão (meio gambiarra pra variar).
Só testei no IE6, FF2 e OP9 e em poucas situações. Em caso de bug, não esqueçam de me avisar. Em caso de melhorias, manda ae.