About "Loading page" function

JavaScript
1

I dont know if this thread supposed to be here or in the javascript forum, but since my pages are in ASP then ill ask it here…
I got a page that displays pictures, those pictures can be enlarged with the thumbnailviewer javascript function, however, if u click on an image before the script is loaded, it opens the picture on a different page…
so i want to add sometihng like “Loading images, please wait…” msg when some1 is loading the page, and only after the script is loaded it will view the page, how can it be done?

Thanks for the assistance,
Ulthane

2

Perfect, thanks :slight_smile:

3

It would seem Kalon made a typo.

Does this work?

 
window.onload=function() [COLOR="Red"]{[/COLOR]
   document.body.style.display = 'block';
}
4

nvm, got it ^^

<html><head>
<script language="JavaScript">
function clearPreloadPage() 
{ 
  if (document.getElementById){
    document.getElementById('prepage').style.visibility='hidden';
   }
   else{
   if (document.layers){ //NS
    document.prepage.visibility = 'hidden';
   }
   else { //IE
    document.all.prepage.style.visibility = 'hidden';
   }
  }
} //end function
</script>
</head>

<body bgcolor=#FFFFFF onLoad="clearPreloadPage();">
<div id="prepage" style="position:absolute; font-family:arial; font-size:16; left:0px; 
top:0px; background-color:white; layer-background-color:white; height:100%; width:100%;"> 
<table width=100%><tr><td>Put an animated-gif here, change the anamation speed to fit your 

page</td></tr></table>
</div>

...Page content goes here...

</body>
<html>
5

Well this works, but i wanted to have a msg aswell saying that the page is loading or something, watching a completely blank page for a few seconds isnt really attractive :slight_smile:

6

You could do something like the below to achieve that. You just need to have a element wrapping the entire page contents.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Page Loader</title>
	
	<script type="text/javascript">
		setTimeout(function() { 
			
			// Get page loader
			var loader = document.getElementById('page-loader');
			
			// remove the page loader
			loader.parentNode.removeChild(loader);
			
			// display the page contents
			document.getElementById('container').style.display = 'block';
			
		},3000); // 3 second delay to mimic onload after 3 seconds
	</script>
	
	
</head>
<body>

	<div id="page-loader">
		<p>loading...</p>
	</div>

	<div id="container" style="display: none;">
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
		<p>Content</p>
	</div>

</body>
</html>
7

doesn’t seem to work…it just shows a blank page

8 
 
body {
    display: none
}

then

 
window.onload=function() [
   document.body.style.display = 'block';
}
9

Well, after a few times i tried this function i noticed that the rest of the content of the page is still visible (when scrolling down with the mouse)… How do i change it so the whole page is hidden while loading? or is there a better function to hide the content of the page?

Thanks in advance,
Ulthane