quarta-feira, 5 de outubro de 2011

Loader para página inteira.(JavaScript)

Bem, parando um pouco o html para dar uma dica de javascript.
Hoje me deparei com um problema comum. Inserir um loader antes de mostrara página principal do site.
A ultima vez que me deparei com esse problema (necessidade) lembrei de um codigo a algum tempo esquecido. A ultima versão era p/ no máximo IE6.
Fazendo uma adaptação consegui faze-lo ser útil para, partir do IE6 p/ frente, Mozilla, Chrome, Opera e Safari (unicos que testei).
Aqui vai o código:
Arquivo loader.js

[code]
function checkBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie9=(this.ver.indexOf("MSIE 9")>-1 && this.dom)?1:0;
    this.ie8=(this.ver.indexOf("MSIE 8")>-1 && this.dom)?1:0;
    this.ie7=(this.ver.indexOf("MSIE 7")>-1 && this.dom)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie9 || this.ie8 || this.ie7 || this.ie6 || this.ns4 || this.ns5)
    return this
}

bw=new checkBrowser()

function hideIt(div){
    if(bw.bw){
        div="divLoadCont";
        obj=bw.dom?document.getElementById(div).style:bw.ie6?document.all[div].style:bw.ns4?document[div]:0;
        obj.visibility='hidden';
        $('#corpo').css("display","block");// para este é necessário uso de jquery
       
        // se necessário baixar mais imagens depois do escopo principal carregado.
        //imagem01 = new Image();
           //imagem01.src = "imagens/fundos/fundo1.jpg";
    }
}

onload=hideIt;

// veja exemplo de uso no arquivo loader.html
[/code]

Arquivo loader.html(ou index.html)
[code]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Titulo site</title>
      
           <!-- função loader -->
        <script src="js/loader.js" type="text/javascript" language="javascript"></script>
      
    </head>
    <body>
  
        <script>
            // print do loader
            if(bw.bw) document.write('<div id="divLoadCont"><img src="imagens/loader_dark.gif"></div>')
        </script>
      
        <div id="corpo" style="display:none">
            <!-- conteudo do site -->
        </div>
      
    </body>
</html>
[/code]

Qualquer dificuldades é só comentar que responderei assim que possível!

Nenhum comentário:

Postar um comentário