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?
freespirit020199Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
slokConnect With a Mentor Commented:
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...

0
 
mgfranzCommented:
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...
0
 
jocasCommented:
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.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
bandleCommented:
<script>
//This all goes inbetween the head tags
n=document.layers
ie=document.all

function hideIt(){
      if(ie || n){
            if(n) document.divLoadCont.visibility="hidden"
            else divLoadCont.style.visibility="hidden"
      }
}
</script>
<style>
#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}
TD{font-family:arial,helvetica}
</style>

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


      <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 Page....</h3></td></tr></table></div>')
      </script>

</body>

*****************
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
0
 
bandleCommented:
I guess I ought to explain what exactly the script does. 'Loading Page....' is displayed until the page is ready to be displayed.
0
 
Michel PlungjanIT ExpertCommented:
Bandle: Looks really nice...

Michel
0
 
PBallCommented:
Also, take a look at the tutorial part in www.htmlguru.com, also he does this a lot in his book.
0
 
mgfranzCommented:
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...

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

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



      <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
      Page....</h3></td></tr></table></div>')
      </script>

goes right after the <BODY tag.

Michel
0
 
mgfranzCommented:
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.
0
 
mgfranzCommented:
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.
0
 
mgfranzCommented:
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.
0
All Courses

From novice to tech pro — start learning today.