Tech Reflexes: Hourglass (Wait) cursor on page load

This is another pearl that was figured at work today. There are instances where we might want to turn the cursor into a hourglass symbolizing that the user needs to wait as the page is getting loaded. There are more than one way to achieve this. There are two that comes to my mind (please feel free to add more)

1. Using AJAX - UpdateProgress Extender that displays a wait modal popup extender when the page is getting loaded and ready
2. A simpler approach is to use JavaScript that does exactly this

We are going to see the second approach at work -

function doWait()
{
document.body.style.cursor = 'wait';
}
<body onbeforeunload="doWait();" onunload="doWait();">

Notice the events onbeforeunload() and onunload() events. The reason we use two events is that these events are browser dependent and so to behave well with different browsers, we do this!

Both Mozilla FireFox and Internet Explorer implements onbeforeunload() DOM events.

Another useful function of onbeforeunload() is to alert the user when he leaves the webpage. Read here to know more about this DOM event.

Tech Reflexes

Friday, October 24, 2008

Hourglass (Wait) cursor on page load

0 comments:

Blog Posts