Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Fade-out page - How?

Posted on 1999-07-03
14
Medium Priority
?
224 Views
Last Modified: 2013-12-25
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?
0
Comment
Question by:freespirit020199
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +4
14 Comments
 
LVL 18

Expert Comment

by:mgfranz
ID: 1863722
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
 

Expert Comment

by:jocas
ID: 1863723
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
 

Expert Comment

by:bandle
ID: 1863724
<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
Cloud Training Guides

FREE GUIDES: In-depth and hand-crafted Linux, AWS, OpenStack, DevOps, Azure, and Cloud training guides created by Linux Academy instructors and the community.

 

Expert Comment

by:bandle
ID: 1863725
I guess I ought to explain what exactly the script does. 'Loading Page....' is displayed until the page is ready to be displayed.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1863726
Bandle: Looks really nice...

Michel
0
 
LVL 6

Expert Comment

by:PBall
ID: 1863727
Also, take a look at the tutorial part in www.htmlguru.com, also he does this a lot in his book.
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 1863728
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1863729
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
 

Author Comment

by:freespirit020199
ID: 1863730
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1863731
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 1863732
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 1863733
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
 
LVL 3

Accepted Solution

by:
slok earned 200 total points
ID: 1863734
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 1863735
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

Featured Post

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question