[RESOLVED] Loading Page

alirezaok

i am looking for a script that when any user enter my website adress in address bar and he enters to my website a loading message showes until complete home pags.

when this message is showing backgrund is darker and it is in completing. also all links in background are disabled. then when pages loading completes loading message hides and page is lighter (orginal light) and all link and objects are enables to work.

Like this: www.mihannic.com

any one can help me to make this script?

thanks

sneakyimp

You should try reading the source code of that page you like. That's probably the quickest way.

bpat1434

The "easiest" solution to this is to use AJAX and have your "blank" page call for the default index and toggle the "loading" screen.

They're just using the <body> tags onload attribute to call a function which checks to see if the page is loaded or not. THen later in the page, they set a variable (htmlLoaded) to true which turns off the "loading" screen.

Either way works, although their way mimicks AJAX while using AJAX you can open a few more doors.

alirezaok

thank you very much

alirezaok

this is a good example to make an ides:

<html> 
<head> 
<title>Gen Wait</title></head> 
<body> 
<script> 
function genWait(met) { 
 if(met==1){ 
  if( typeof( window.innerWidth ) == 'number' ) { 
    //Non-IE 
    brwsWidth = window.innerWidth; 
    brwsHeight = window.innerHeight; 
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 
    //IE 6+ in 'standards compliant mode' 
    brwsWidth = document.documentElement.clientWidth; 
    brwsHeight = document.documentElement.clientHeight; 
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 
    //IE 4 compatible 
    brwsWidth = document.body.clientWidth; 
    brwsHeight = document.body.clientHeight; 
  } 
   pageOver = document.getElementById("pageoverlay"); 
   pageOver.style.width = brwsWidth+"px"; 
   pageOver.style.height = brwsHeight+"px"; 
   pageOver.style.background = "#4FA3DA"; 
   pageOver.style.position = "absolute"; 
   pageOver.style.left = 0; 
   pageOver.style.top = 0; 
   pageOver.style.opacity = 5/10; 
   pageOver.style.filter = 'alpha(opacity=' + 5*10 + ')'; 
   pageOver.style.display='block'; 
}else if(met==0){ 
   pageOver = document.getElementById("pageoverlay"); 
   pageOver.style.display='none'; 
} 
} 

</script> 
<body> 
<div id="pageoverlay"><input type=button value="Hide Wait" onclick="genWait(0)"></div> 
<input type=button value="Show Wait" onclick="genWait(1)"> 
</body> 
</html>