"Loading page" with ajax (no jQuery)

Asked

Viewed 208 times

0

I’m trying to do that "Loading" effect when the user accesses ONLY THE MAIN PAGE, but I’m not getting it

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>
ajax load

  • You put the file/address path in your url ? why I just put a valid address here and it worked :)

  • window.addeventlistener("load", Function(){ var load = Document.getElementById("load"); Document.body.removeChild(load);});

  • I solved my problem

1 answer

0

You can add a set of HTML elements like:

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

With 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;}

And later create a javascript function to display the loading.

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';   
}}

Browser other questions tagged ajax load

You are not signed in. Login or sign up in order to post.