0

Estou tentando fazer aquele efeito "Carregando" quando o usuário acessar SOMENTE A PÁGINA PRINCIPAL, mas não estou conseguindo

CSS:

#load {background:url(http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif) no-repeat center;background-color:#fff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}

JavaScript:

function GetXmlHttpObject() {
 var xmlHttp=null;
 try {
   // Firefox, Opera 8.0+, Safari
   xmlHttp=new XMLHttpRequest();
 } catch (e) {
   // Internet Explorer
   try {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
 }
 return xmlHttp;
}


function request() {
    myRequest = GetXmlHttpObject();
    url = '/';
    myRequest.open('GET',url,true);
    myRequest.onreadystatechange = function() {
         if(myRequest.readyState == 4 && myRequest.status == 200) {
              document.getElementById('load').style.display = 'none';
         }
    }
    myRequest.send(null);
}

HTML:

<div id="load"></div>
3
  • Você colocou o caminho do arquivo/endereço na sua url ? por que eu apenas coloquei um endereço valido aqui e funcionou :) Commented 5/02/2016 às 12:14
  • window.addEventListener("load", function(){ var load = document.getElementById("load"); document.body.removeChild(load);}); Commented 6/02/2016 às 17:24
  • Resolvi meu problema Commented 6/02/2016 às 17:25

1 Resposta 1

0

Você pode adicionar em sua página um conjunto de elementos HTML como:

<div class="prepage" id="prepage">  
<div class="carregando" id="carregando">
    <div class="cabecPre">Aguarde</div><br>
    <div class="loader"><img src="../imagens/ajax-loader.gif"  alt="loader" /></div>
</div>

Com Css:

.prepage {
position:fixed;
z-index:600;
font-family:Calibri;
left:0;
top:0;  
background:url(imagens/backCarregando1.png) repeat; 
border:0px solid #C0C0C0;
height:100%;
width:100%;}

.carregando{
position:absolute;
font-family:Calibri;
background:#FFF;
border:1px solid #C0C0C0;
height:70px;
visibility:hidden;
width:250px;}

E posteriormente criar uma função javascript para exibir o carregando.

function ExibirAguarde(valor){
if (valor == 1)//exibir
{
    document.getElementById('prepage').style.visibility='visible';
}
else
{
    document.getElementById('carregando').style.visibility='hidden';
    document.getElementById('prepage').style.visibility='hidden';   
}}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .