Evento body onReady sem o uso de libs (DOM)
Aberta 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.
Novembro 14th, 2007 14:42
Muito boa a dica, eu sou um dos que não usa framework.
[]’s
Novembro 14th, 2007 15:16
O blog tá muito bacana e obrigado pela referência!
Ved
Novembro 16th, 2007 05:37
Boa saída Mico, eu uso algo diferente, mas não sou muito de usar framework, até porque normalmente tenho muita coisa pronta já feita ou adaptada por mim, soh preciso reciclar em cada projeto.
Novembro 20th, 2007 09:49
Boa Náiron.
Em projetos utilizando apenas a plataforma Mozilla, basta utilizar o evento DOMContentLoaded:
http://developer.mozilla.org/en/docs/Gecko-Specific_DOM_Events#DOMContentLoaded
Novembro 20th, 2007 09:56
Opa, valeu pessoal.
Valeu pelo esclarecimento ae Leandro.
Desculpem a demora em responder. É que os comentários tavam indo pra minha caixa de SPAM no email (e eu achando que ninguém tinha comentado hehaehha).
Dezembro 11th, 2007 10:15
Pra quem nao usa nenhum framework tem uma saida usando o mesma função dos frameworks só que independente e solta para ser usado em qualquer projeto
exemplo:
function addEvent(obj, evType, fn) {
if (typeof obj == “string”) {
if (null == (obj = document.getElementById(obj))) {
throw new Error(”Cannot add event listener: HTML Element not found.”);
}
}
if (obj.attachEvent) {
return obj.attachEvent((”on” evType), fn);
} else if (obj.addEventListener) {
return obj.addEventListener(evType, fn, true);
} else {
throw new Error(”Your browser doesn’t support event listeners.”);
}
}
addEvent(window, “load”, nome_da_funcao);
Dezembro 11th, 2007 10:21
Opa Fabyo, baozão?
Seguinte: o evento load do window é bem diferente do evento ready.
Dá uma lida no post ae novamente que você vai entender.
O load ocorre só depois que todas as imagens foram carregadas.
Março 3rd, 2008 09:29
Bom dia micox.. tranquilo?
Cara eu usei essa sua função em site, so que na maquina local rodando em localhost funciona 100%, ai quando coloco no server ele não funciona. não faz a quebra de linha e nem da erro.
O que poderia ser?