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 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.

El Micox

14 novembro, 2007

Evento body onReady sem o uso de libs (DOM)

2 comentários:

Resultado! Concursos