asked on

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?

Mark Franz

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

jocas

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.

bandle

bandle

I guess I ought to explain what exactly the script does. 'Loading Page....' is displayed until the page is ready to be displayed.

Michel Plungjan

Bandle: Looks really nice...

Michel

PBall

Also, take a look at the tutorial part in www.htmlguru.com, also he does this a lot in his book.

Mark Franz

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 Plungjan

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

freespirit020199

ASKER

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 Plungjan

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

Mark Franz

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.

Mark Franz

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.

ASKER CERTIFIED SOLUTION

slok

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mark Franz

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.