Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > insights

Javascript Loading Mask

eragon's Avatar
Needs Regular Fix
  
Join Date: Mar 2007
Location: US
Posts: 428
#1   Dec 1 '07
JavaScript Loading Mask

Requirements: Little knowledge in JavaScript and some HTML. JavaScript enabled browser.
Applications: Useful for all those pages that load slow, and in sections, so instead of watching the page load in sections.


Put this in your <head>:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function overlay() {
  3. elem = document.getElementById("overlay");
  4.  elem.style.visibility="hidden";
  5. elem = document.getElementById("bodydiv");
  6.  elem.style.visibility="visible"; 
  7.  }
  8. </script>


Make your <body> tag look like this:
Expand|Select|Wrap|Line Numbers
  1. <body onLoad="overlay()">


Inside your <body>, at the top of everything, put this:
Expand|Select|Wrap|Line Numbers
  1. <div id="overlay" style="width:100%; height:100%; position: absolute; background-color:#000000;">
  2.     <table><tr><td valign="center" height="100%" width="100%">
  3.         <div align="center" style="border: 1px solid black; background-color:#ffffff; width:50%;">
  4.         <h3>Loading... Please Wait.</h3>
  5.         </div>
  6.     </td></tr></table>
  7. </div>
  8. <div id="bodydiv" style="visibility:hidden;">
  9.     ... (your current page body) ...<br />
  10.     ... (Which should be long..) ...<br />
  11.     ... (because it has to load) ...<br />
  12.     ... (so yeah.. this is body) ...
  13. </div>


So all together you get:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Loading Screen</title>
  4. <script type="text/javascript">
  5. function overlay() {
  6. elem = document.getElementById("overlay");
  7.  elem.style.visibility="hidden";
  8. elem = document.getElementById("bodydiv");
  9.  elem.style.visibility="visible"; 
  10.  }
  11. </script>
  12. </head>
  13. <body onLoad="overlay()">
  14.  
  15. <div id="overlay" style="width:100%; height:100%; position: absolute; background-color:#000000;">
  16.     <table><tr><td valign="center" height="100%" width="100%">
  17.         <div align="center" style="border: 1px solid black; background-color:#ffffff; width:50%;">
  18.         <h3>Loading... Please Wait.</h3>
  19.         </div>
  20.     </td></tr></table>
  21. </div>
  22. <div id="bodydiv" style="visibility:hidden;">
  23.     ... (your current page body) ...<br />
  24.     ... (Which should be long..) ...<br />
  25.     ... (because it has to load) ...<br />
  26.     ... (so yeah.. this is body) ...
  27. </div>
  28.  
  29. </body>
  30. </html>


And you have a pleasant loading message. You may edit the content (div styles, etc.) but the JavaScript must remain as is, unless you know what you are doing. This is really a simple script, but it is there for those that want it.

Sincerely,
Eragon



acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#2   Dec 3 '07

re: Javascript Loading Mask

Are you sure you've got the background color correct - o or 0?

Remember, Java != JavaScript.

Otherwise, I'm sure people will find this useful.
eragon's Avatar
Needs Regular Fix
  
Join Date: Mar 2007
Location: US
Posts: 428
#3   Dec 4 '07

re: Javascript Loading Mask

Background color fix: #000000

and thats all i presume. Please check for compatibility...

thank you :)
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#4   Dec 5 '07

re: Javascript Loading Mask

Quote:

Originally Posted by eragon

Background color fix: #000000

and thats all i presume. Please check for compatibility...

Fixed. I'll check it later.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#5   Jan 1 '08

re: Javascript Loading Mask

There was a mistake in the full version of the code in the body onload (line 13). You forgot the parentheses/brackets. I've added them for you.

This seems to work well, but you should consider changing the colors and font - black and white is a bit boring!
eragon's Avatar
Needs Regular Fix
  
Join Date: Mar 2007
Location: US
Posts: 428
#6   Jan 2 '08

re: Javascript Loading Mask

Quote:

Originally Posted by acoder

There was a mistake in the full version of the code in the body onload (line 13). You forgot the parentheses/brackets. I've added them for you.

This seems to work well, but you should consider changing the colors and font - black and white is a bit boring!

thanks. This code is user customizable. They can change the colors at will.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#7   Jan 2 '08

re: Javascript Loading Mask

Quote:

Originally Posted by eragon

thanks. This code is user customizable. They can change the colors at will.

Of course, but rather than changing inline, it should be customizable through JavaScript since the overlay should not display if JavaScript is not enabled. In fact, you should consider a drop-in script which would involve the use of document.write after the body tag.
eragon's Avatar
Needs Regular Fix
  
Join Date: Mar 2007
Location: US
Posts: 428
#8   Jan 3 '08

re: Javascript Loading Mask

Quote:

Originally Posted by acoder

Of course, but rather than changing inline, it should be customizable through JavaScript since the overlay should not display if JavaScript is not enabled. In fact, you should consider a drop-in script which would involve the use of document.write after the body tag.

good idea.... ill change that and post another code. Because with this one, if the user doesn't have javascript, your just going to have an infinitely loading page.

ill post another version when i get done with a few things.
Newbie
  
Join Date: Mar 2009
Posts: 2
#9   Mar 15 '09

re: Javascript Loading Mask

Hi, this does not seem to work in IE8, could anyone fix this?
LE: I added Adsense code during loading process and after the page is loaded adsense sticks out, does not disappear.
LE2: Adsense issue fixed :D
Now I only need to make it work in IE8.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#10   Mar 19 '09

re: Javascript Loading Mask

What happens in IE8? Have you tried other versions of IE?

You may want to post in the forum instead of here to get a better response.
Newbie
  
Join Date: Mar 2009
Posts: 2
#11   Mar 27 '09

re: Javascript Loading Mask

Quote:

Originally Posted by acoder View Post

What happens in IE8? Have you tried other versions of IE?

You may want to post in the forum instead of here to get a better response.

In Mozilla, Safari and Chrome everything looks perfect but in IE(tried 6,7 and 8) the preloader is loading in the right of the page, not in the middle, maybe is because position:absolute, i don't know... can anyone help?
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#12   Mar 31 '09

re: Javascript Loading Mask

Ah right, that's more a CSS problem. Here's one way you could do it. You may also find this useful. Failing that, ask in the HTML/CSS forum.
eragon's Avatar
Needs Regular Fix
  
Join Date: Mar 2007
Location: US
Posts: 428
#13   Jul 7 '09

re: Javascript Loading Mask

Two years it took.

But alas, i have returned.

And by the way, i have a better code.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Loading Screen</title>
  4. <script type="text/javascript">
  5.  
  6.     //Hide the body. See, if you have javascript, it would hide, otherwise, it's visible.
  7.     elem3 = document.getElementById("bodydiv");
  8.     elem3.style.visibility="hidden";
  9.  
  10.     //Show the loading page. Same as above.
  11.     elem4 = document.getElementById("overlay");
  12.     elem4.style.visibility="visible";
  13.  
  14.     function overlay() {
  15.         elem = document.getElementById("overlay");
  16.         elem.style.visibility="hidden";
  17.         elem2 = document.getElementById("bodydiv");
  18.         elem2.style.visibility="visible"; 
  19.     }
  20. </script>
  21. <style>
  22.  
  23.     #overlay {
  24.         width: 100%;
  25.         height: 100%;
  26.         position: absolute;
  27.         visibility: hidden;
  28.  
  29.         /*Background information for the preloading mask:*/
  30.         background-color:#000000;
  31.  
  32.         /*Font color and options:*/
  33.         color:#CCCCCC;
  34.         font-family:Georgia, "Times New Roman", Times, serif;
  35.         font-size:16px;
  36.     }
  37.  
  38. </style>
  39. </head>
  40. <body onLoad="overlay()">
  41. <div id="overlay">
  42.     <table><tr><td valign="center" height="100%" width="100%">
  43.         <div align="center">
  44.             Loading... Please Wait.<!--You can put pretty much whatever here.-->
  45.         </div>
  46.     </td></tr></table>
  47. </div>
  48.  
  49. <div id="bodydiv" style="visibility:visible;">
  50.  
  51. <!-- YOUR BODY CONTENT WOULD GO HERE -->
  52.  
  53. </div>
  54. </body>
  55. </html>
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#14   Jul 7 '09

re: Javascript Loading Mask

That wouldn't work because on line 7, bodydiv wouldn't have been defined yet.
Reply

« previous insight | next insight »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 229,155 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved