About "Loading page" function

**ulthane** · Sep 30, 2010 07:18

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

**ulthane** · Sep 30, 2010 12:58

nvm, got it ^^

Code:

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

**ulthane** · Oct 3, 2010 03:00

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

**Kalon** · Oct 3, 2010 03:11

Originally Posted by ulthane

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

Code:

 
body {
    display: none
}

then

Code:

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

**ulthane** · Oct 3, 2010 09:04

doesn't seem to work...it just shows a blank page

**ScallioXTX** · Oct 3, 2010 09:19

It would seem Kalon made a typo.

Does this work?

Code:

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

**ulthane** · Oct 3, 2010 12:56

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

**oddz** · Oct 3, 2010 13:42

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

HTML Code:

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

**ulthane** · Oct 3, 2010 14:12

Perfect, thanks

User Tag List

Thread: About "Loading page" function

Thread Tools

Display

About "Loading page" function

Bookmarks

Bookmarks

Posting Permissions