Page Not Loaded Alert

by Joe Burns, Ph.D.

Use these to jump around or read it all...

[The Effect]
[The Code]

Have you ever clicked on a link and nothing happened? You sat and waited and that little IE globe spun and spun. The Netscape "N" was rained down upon by flaming brimstone, but nothing happened. You wonder if the page has forgotten all about you.

A student questioned me about that and if it was possible to set up a script that would basically keep an eye on things so that if the page hadn't changed within, say, 15 seconds, something would happen alerting the user that he or she should most likely click again or try something else.

Here's what we came up with.


The Effect

The link below is set to go to a page that doesn't exist. It's a mistake on purpose. After 15 seconds, you should get the effect. If your system doesn't stay dead and on this page for 15 seconds, then you may have to disconnect yourself from the Web and re-click to see the effect.

Click Here and Wait 15 seconds

After 15 seconds, you should have gotten an alert box that reads: "The page doesn't seem to want to load. Click it again."

It's a fairly simple effect done with a fairly simply JavaScript.


The Code

Here you go:

<SCRIPT LANGUAGE="JavaScript">

var count=1

function checkIfFound()
{
count = count + 1

if(count == 3)
{
alert('The page doesn\'t seem to want to load. Click it again.')
return false
}
else
{count==count}

}

setTimeout('checkIfFound()',15000);

</SCRIPT>

<A HREF="ttt.html" onClick="checkIfFound()">
Click Here and Wait 15 seconds</A>

The script is fired by an onClick Event Handler in the hypertext link code. See that above? I set up the script so that you could have one of these actual scripts on the page and then set all of the page's links to point to it when clicked.

The script itself reads right from the top down. First we set a variable, "count," to one.

var count=1

Next, the function. It's named checkIfFound().

function checkIfFound()
{
count = count + 1

if(count == 3)
{
alert('The page doesn\'t seem to want to load. Click it again.')
return false
}
else
{count==count}

}

Here's the basic flow. One is added to the count and then that count is checked to see if it is equal to three. We know it isn't because we set it to one to start with and then simply added another. It's only up to two.

Everything else is passed over, count is allowed to stay at its current level (count==count) and we get to this line:

setTimeout('checkIfFound()',15000);

That line sets a time out, in 1000ths of a second. I have it set to 15,000 thus it'll wait 15 seconds and then fire the script again.

OK, back to the top of the function:

function checkIfFound()
{
count = count + 1

if(count == 3)
{
alert('The page doesn\'t seem to want to load. Click it again.')
return false
}
else
{count==count}

}

One is added to the count and now we know it's equal to three. That triggers the alert box telling the user the page seems to be dead.

You can change the text in the alert code to say anything you'd like.

Of course you can also set that line to be a parent.location line and load a different page. Either way, the script does a nice trick. It keeps an eye on the user and if things have come to a complete halt, it tells him or her you're still interested.

  Enjoy!

[The Effect]
[The Code]

[HTML Goodies Domain]