﻿/* JScript File    
    Chamada: <script src="pasta onde esta/load.js" type="text/javascript"></script>

    Uso:
    <body>
        <div id="conteudo">
            ## Página Completa Aqui ##
        </div>
        <script>loading()</script>
    </body>
    
    CSS:
    #conteudo {
	    display: none;
	}	
*/

function loading(){
    //criando um novo elemento div
    x = document.createElement("div")
    //atribuindo o id ao novo elemento
    x.id = "loader"
    //adicionando conteudo formatado pelo CSS na div loader 
    /*
    x.innerHTML = 
    '<div id="info" style="top: 30px; left: 30px; position: absolute;">'+
    '<span style="'+
        'background-color: Red; '+
        'color: White; '+
        'font-family: Verdana; '+
        'font-size: 12px; '+
        'padding: 4px 4px 4px 4px"; '+
    '">'+
    '<p>'+
    '&nbsp;Carregando ...&nbsp;'+
    '</p>'
    '</span>'+
    '</div>'
    */
    
    x.innerHTML =  
    '<div id="info" class="info" style="top: 30px; left: 30px; position: absolute;">'+
    '<p style="'+
        'background-color: #FFFFFF; '+
        'color: Black; '+
        'font-family: Verdana; '+
        'font-size: 12px; '+
        'padding: 4px 4px 4px 4px";'+
    '>'+
    'Carregando…'+
    '</p>'+
    '</div>'
    
    // nova div ira aparecer depois da div conteudo
    conteudoDiv = document.getElementById("conteudo")
    //inserindo a div loader dentro do body e apos a div conteudo
    document.body.insertBefore(x, conteudoDiv)
}

//função aguarda a pagina carregar para alterar
//propriedade display do elem. fazendo sumir
window.onload = function(){
    //obtendo as propriedades do elemento div conteudo
    obj2 = document.getElementById("conteudo")
    //exibindo a div conteudo (display none no CSS) 
    obj2.style.display = 'block'
    //obtendo as propriedades do elemento div loader
    obj = document.getElementById("loader")
    //removendo o conteudo da div loader
    obj.innerHTML = ""
    //ocultando a div loader apos o carregamento da pagina
    obj.style.display = 'none'  
}

/* Outros Métodos

1)
<div style="top: 50%; left: 50%; position: absolute;">

    <script language="JavaScript">
        document.write('<div id="loadings"><span style="background-color: Red; color: White; font-family: Verdana; font-size: 12px">&nbsp;Carregando ...&nbsp;</span></div>');
        window.onload=function() {
            document.getElementById("loadings").style.display="none";
        }
    </script>

</div>

2)
document.write('<div id="loadings" style="left: 5%; position: absolute;"><img src="App_Themes/grid/loader.gif"></div>');
    window.onload=function() {
    document.getElementById("loadings").style.display="none";
}

*/

