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 3.0 - 15/10/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/
//flag global para indicar que já rodou e function que roda realmente
done = false
init = function(){ if(!done) { done=true; func() } }
var d=document; //apelido para o document
//pra quem tem o DOMContent (FF)
if(document.addEventListener){ d.addEventListener("DOMContentLoaded", init, false );}
if( /msie/i.test( navigator.userAgent ) ){ //IE
(function () {
try { // throws errors until after ondocumentready
d.documentElement.doScroll("left");
} catch (e) {
setTimeout(arguments.callee, 10); return;
}
// no errors, fire
init();
})();
}
if ( window.opera ){
d.addEventListener( "DOMContentLoaded", function () {
if (done) return;
//no opera, os estilos só são habilitados no fim do DOMready
for (var i = 0; i < d.styleSheets.length; i++){
if (d.styleSheets[i].disabled)
setTimeout( arguments.callee, 10 ); return;
}
// fire
init();
}, false);
}
if (/webkit/i.test( navigator.userAgent )){ //safari's
if(done) return;
//testando o readyState igual a loaded ou complete
if ( /loaded|complete/i.test(d.readyState)===false ) {
setTimeout( arguments.callee, 10 ); return;
}
init();
}
//se nada funfou eu mando a velha window.onload lenta mesmo
if(!done) window.onload = init
}
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.
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
