This article was originally published in PC Pro and is reproduced with permission.
The other day, a friend asked for advice on how to set a time-out on the splash page on his site.
Basically, he wanted to display an animated logo for five seconds and then move on to the main page of the site. He'd been doing this using META refresh code:
<META http-equiv="refresh" content="5; URL=mainpage.html">but found that this doesn't work as expected. The problem is that this counter starts as soon as the page starts loading, so those with fast connections see the splash screen, but those on slower links would flip pages before the animated logo had finished downloading. So how can you rectify the problem?
Well, the first bit of advice has to be don't ever put a splash screen on a Web site. They serve no purpose except to slow entry to your site, users hate them and you'll lose visitors from your site. Unfortunately, this was one of those 'client knows best' scenarios, and our friend had already put these arguments for removing the splash screen until he was blue in the face. So, given that he had to have a splash screen, how could he time it properly? The answer is don't use META refresh, but instead bury an 'onLoad' within the <BODY> tag
<BODY onLoad=setTimeout("location.href='mainpage.html'",5000)>You can read about the onLoad command on many reference sites, including Netscape's JavaScript reference and Microsoft's JScript resource.
The difference between onLoad and using META refresh is that onLoad starts the timer after the page has loaded, and so works exactly as expected. There are still two potential gotchas to watch out for though. First, the delay is specified in milliseconds, hence the 5,000 rather than the five. Second, this will only work on browsers that have JavaScript enabled. You could get around this by putting, say, a 15-second META refresh back in. Alternatively, have a 'skip to main page' link in text somewhere on the splash page. This can then be used by those for whom the onLoad fails, and also by those who hate waiting for pointless animated logos to load.
All articles Copyright CST Group Limited ©1997-2024
Let's Talk
Whether you have a new or existing project, we’d love to hear from you.
Our experienced team thrive on problem solving and working with your business goals in mind.