jQuery: denote cursor busy until ready [Archive]

Ralph Shnelvar

04-04-2010, 12:01 AM

I'd like to know how to mark the cursor as busy until the ready event.

I've seen http://ryanmorr.com/archives/ondomready-no-browser-sniffing but my javascript and jQuery skills are not strong enough to figure out how to put the cursor in hourglass mode until the

$(document).ready(function()

kicks in.

Iszak

04-05-2010, 03:43 PM

Let me first say that what you're attempting is somewhat difficult as document ready occurs quite quickly so perhaps unless there's many lines of HTML.

Now ideally we'll set the cursor to wait on the body but this requires us to put a script tag immediately after the body as the body isn't loaded if we do it in the head. Now personally I feel this is rather messy, I'm just used to putting it in the head so my solution was instead of targetting the body, target the html element which is loaded - I don't know if this has any compatability issues.

Now that solves most problems except one.. the fact that if any element has a specific cursor style e.g. anchors have the style pointer and thus won't inherit the waiting cursor, I wasn't able to fix this so here is the resulting code.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var $html = $('html').css('cursor', 'wait');

$(function(){
$html.css('cursor', '');
});
</script>
</head>
<body>

</body>
</html>