Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fonte: Evento body on ready sem o uso de libs
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."
Editado dia 28/05/2008 - ATENÇÃO: Este meu código parece não funcionar bem sempre. Teste ele direito antes de usar, se ele não funcionar, bem, não use... Mas não me xingue ;)
<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>"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)
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
}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".
Té a próxima, malucada.
El Micox - Resultado! Concursos - Shopping Resultado - Concurso Ministério da Fazenda
Opa valeu cara.
Eu e outros caras vimos que meu código tá dando bug em certas condições e online em um servidor.
Daí eu alterei para:
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/](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);
}
}Prefiro baixar o JQuery e fazer um $(function() {});!
auhauhaAHaHAAAHhuahuAHAhuaa
Brincadeira Micolino... tu é danado rapá! DUCA esse teu esquema aí... vou até utilizar em alguns projetos (mantendo obviamente teus créditos como já fiz com outros! eheh)
ABRAX!!!!! B)
Opa valeu ae, heeh
Mas voltei só pra dar um aviso: esse bixo parece que não está funcionando como o esperado em alguns casos não. Testem bem ao usá-lo. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Té mais povo.
Atualizado novamente:
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
}Muito bom Micox
Obrigado por compartilhar
Em caso de bug, não esqueçam de me avisar. Em caso de melhorias, manda ae.
O tópico é antigo mas o Sr. disse então lá vai :P
function bodyOnReady(func)
{
Tá não faz nada de diferente a rotina mas o código tá mais "bonito" :huh: Bom, gosto de códigos bonitos então tá aí :P