"Page loading" with ajax (without jQuery)

Navigation
0

I'm trying to do that "Loading" effect when the user accesses the MAIN PAGE ONLY, but I'm not able to

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>
    
asked by anonymous 05.02.2016 / 12:39

1 answer

0

You can add a set of HTML elements to your page as: 

<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 subsequently 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';   
}}
    
05.02.2016 / 14:04
How to create an instance of a Prestashop module inside a controller? Bug in scrolling when opening one modal on top of the other