Fade-out page - How?

I am learning how to design my own web site. I am just about done. However my homepage takes a bit of time loading due to preloading of images etc. How do I have an initial page with the message "preloading images...please wait" or some such message initially appear while it is loading for a specific amount of time which fades out after the specified time or until the homepage is loaded? Or any other suggested methods of holding the reader's attention while graphics load?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I have noticed that the biggest mistake people do when creating a web site is load it up with huge graphic items...  If you really need to have a bunch of images on your page, don't preload the images, let the browser load them.  Also, what is the format of these images?  If yo uare not using .jpg as the format, you could be using up a lot of cache space with huge .gif files.  .jpg compression can be a huge saving over .gif images.  But if you are set on preloading images, at least write a header on the top page of your site that runs the preload script that tells the user that "images are being loaded",  please wait...  Or, you can "redirect" the user after images are loaded to the home page.

I would check your image format first...
You could check out
http://javascript.internet.com/bgeffects/index.html for several samples for fades, although I'm not sure this is realy what you are looking for.

Here's a neat idea.  How about about having a Y2K countdown or something that updates every second?  I think most users would enjoy this one.  Better yet, show Bill Gates projected income rising every second. :)

Also, I have noticed that .JPG images are not necessary smaller that .GIF images.  You may want to save the image in both formats to see which one is smaller.
//This all goes inbetween the head tags

function hideIt(){
      if(ie || n){
            if(n) document.divLoadCont.visibility="hidden"
            else divLoadCont.style.visibility="hidden"
#divLoadCont{position:absolute; width:100%; height:95%; top:0; left:0; background-color:white; layer-background-color:white; font-family:arial,helvetica; z-index:100}

//All this stuff goes inbetween the body tags
<body onload="hideIt()">

      if(ie || n) document.write('<div id="divLoadCont"><table width="100%" height="95%" align="center" valign="middle"><tr><td width="100%" height="100%" align="center" valign="middle"><h3>Loading Page....</h3></td></tr></table></div>')


This should work, and you should be able to change the 'Loading Page....' to whatever you like. This is DHTML, so you will need an appropriate browser to view it
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

I guess I ought to explain what exactly the script does. 'Loading Page....' is displayed until the page is ready to be displayed.
Michel PlungjanIT ExpertCommented:
Bandle: Looks really nice...

Also, take a look at the tutorial part in www.htmlguru.com, also he does this a lot in his book.
The average web surfer is going to wait on average less than 12 seconds for a page and it's contents to load....  How long does it take for your page to load?  

Think about this for a while...

Michel PlungjanIT ExpertCommented:
MGFranz has a valid point there...

However, the user will wait if something indicates that something is happening...
Also if the content is important enough, the user will wait too...
Not all sites are geared towards the MTV generation...

I personally like the preload that makes the images look like a progress indicator...

freespirit020199Author Commented:
Thanks to everyone for their advice. Michel I would certainly love to learn how to do just that...the progress indictaor...but haven't a clue how.

To bandle: Thanks. The solution you are giving me is the one which sounds most like the answer to my prob.  I am not html savvy, I use Frontpage 98 to make things easier with some simple html editing and free java scripts from the internet. My browser is Netscape 4.51. The page I am working on is located at http://members.xoom.com/leowyman/
However, for some reason the intsructions you gave me won't work. the message I get when i preview it is "javascript error".  I must be doing something wrong. Am I suppose to insert this into the homepage code or on a separate page altogether? I tried both. I assume it is into the existing homepage. I am currently using a simple script which makes a pop-up window appear for 8 seconds, but i don't like it...would much rather use yours. Help!
Michel PlungjanIT ExpertCommented:
1. replace the existing popup with the code marked
This all goes inbetween the head tags

2. also move the script between the </head> and the

<body bgcolor="#000000" link="#00FFFF" vlink="#FFFF00" alink="#FFFFFF">

into the script tags inside the <HEAD> and </HEAD>
unless you want the preload to take place AFTER the popup has shown, then move it after the <BODY tag.
You are currently not preloading at all because of it's placement.

3. add the onLoad="hideIt()" to the body tag:
<body bgcolor="#000000" link="#00FFFF" vlink="#FFFF00" alink="#FFFFFF" onLoad="hideIt()">

Also (re) move the <font color="#000000" size="1">
it belongs after the <BODY tag...

The second script

      if(ie || n) document.write('<div id="divLoadCont"><table width="100%" height="95%" align="center"
      valign="middle"><tr><td width="100%" height="100%" align="center" valign="middle"><h3>Loading

goes right after the <BODY tag.

I have a sneaky suspicion there is more than just a slow loading page here...  With my T-3 line it still took over a minute and a half to load.  The graphics are fine, not a huge size, only 18K.  Can I suggest you unlink the reference to the counter and linkexchange to see if they are causing a slowdown.
WOW DUDE!  I made a mistake, the HTML page itself is 18K, the images are over 1/2 a Mb!  You should reduce the color depth to 256 on all the images, even on the animation before compiling it, doing this to just a few of your images saved about 60% loading time.
try this neat little trick :

preload your images from the next page by putting them in
the homepage or 'current page'

let's say u have a homepage...
and there are some common images that will appear in other pages..
even if it is not common u can use this trick..

do a one-pixel-by-one-pixel of the image u want to pre-load..
u will notice the improvement..

<img src='your_image_name' width=1 height=1>

users surfing your site will only notice one dot if they are
sharp enuf...


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
This has nothing to do with the fact that the images are HUGE in size... just one corner of the menu image is 130K in size...  As I mentioned, the images equal over 1/2 a Mb, so over a 44.6 K connection, it is probably going to take a full minute.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.