Stupid Web Tricks: Limit how long a splash page is displayed

Splash screens are great, but you don't want them to prevent visitors from getting to your real home page. Find out how to limit how long a splash page displays.

By Lauren Guzak and Patrick Joseph

(1/26/99, updated 6/22/01)

You want a splash screen to announce something big—your company's IPO, the birth of your kid—but you also want to make sure people get to your real home page. Why trust the audience to be smart enough to figure it out? Just tell the page to automatically move on in x number of seconds.

Step One
Paste the following code between the <HEAD> tags of your page:

<META http-equiv="refresh" content="10; URL=index.html">

Step Two
Play with the timing to suit your needs. Our sample code sets the page to move on to the next URL in ten seconds (that's the 10 in the code), but only because that seems like an appropriate amount of time. Depending on what's on the page, you can set the timing interval to anything you want. Just make sure that people visiting your site have enough time to read through any text. There's nothing more annoying than going to a page, starting to read what's there, and being forcefully thrust to another page before you've finished.

One problem with using meta refresh is that the clock starts ticking when the page starts loading. If a user is on a slow connection or there's congestion between the user's machine and your server, the page could refresh before fully loading. You can get around this by foregoing the <META> tag and instead place the following attribute in your <BODY> tag:


The onload event handler activates after the page has finished loading. Unlike meta refresh, onLoad takes its timing in milliseconds (10000) instead of seconds (10). Remember that this method doesn't work for non-JavaScript browsers; for those users, consider including meta refresh with a longer timeout. And you should always provide a link to the refresh page, both as a backup and a consideration.

One more thing. Your server probably has a default name for the first page it serves when someone browses your Web directory, such as index.html or homepage.html. If you put up a temporary splash page, you have to give the splash page the default name and rename your home page something else. Make sure you double-check the links to your home page when you set up a splash page and when you take it down.

Lauren Guzak is a project manager for Ask Jeeves, and Patrick Joseph is a freelance writer.

Editor's Picks