Help
Bom, grande parte das frameworks possui um método nativo incrivelmente útil chamado "On Ready".
Você já o conhece?
[...] 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 (Mootools, 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."
CÓDIGO
<script>
//vai funcionar rapidão pois não precisa esperar a imagem, só o carregamento do HTML
bodyOnReady(function(){
alert('bodyOnReady rapidão após o DOM ter carregado ' + document.getElementById('teste').innerHTML)
})
//vai funcionar beleza, mas só depois que tooodos os elementos forem carregados
window.onload = function(){
alert('window.onload. Só depois das imagens ' + 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 onload="alert('onload do body. Só depois das imagens ' + document.getElementById('teste').innerHTML)">
<img src='http://img119.imageshack.us/img119/4050/no20matinhoue1.jpg' alt='imagem (relativamente) grande' />
<div id='teste'>conteúdo da div</div>
</body>
//vai funcionar rapidão pois não precisa esperar a imagem, só o carregamento do HTML
bodyOnReady(function(){
alert('bodyOnReady rapidão após o DOM ter carregado ' + document.getElementById('teste').innerHTML)
})
//vai funcionar beleza, mas só depois que tooodos os elementos forem carregados
window.onload = function(){
alert('window.onload. Só depois das imagens ' + 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 onload="alert('onload do body. Só depois das imagens ' + document.getElementById('teste').innerHTML)">
<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.
(edit 15-10-08 - atualizada, a versão anterior tava meio bugada)
CÓDIGO
function bodyOnReady(func){
//by Micox - based in jquery bindReady and Diego Perini IEContentLoaded
//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
}
//by Micox - based in jquery bindReady and Diego Perini IEContentLoaded
//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.
"Obrigado senhor Mico, o senhor salvou minha vida. Agora meu script não precisa aguardar minhas cinqüenta mil imagens serem carregadas antes de começar a rodar".
