If you have an application that uses a very large image, you can preload that image,
but that causes slow page loading. Or you may want to change a large image after the
page has loaded. During the image loading time you may want to change the mouse pointer
to a wait cursor. You could use the statement shown below to accomplish that.
document.body.style.cursor = "wait";
Unfortunately I have found that, although this will cause a wait cursor over
the image element, it will not change the cursor over the entire page. It appears,
at least in my experience, that you are not allowed to change the cursor for the body
element itself, only child elements of the body element. In other words,
any vertical area of the body that is not covered by a child element will
revert to the default cursor.
This is obviously a bug because if I set the background color style of the body element,
it doesn't just apply to the part of the body covered by child elements, it applies to the
entire body element, so should the mouse pointer cursor style. This bug may not appear
in all browsers.
Therefore the way to change the mouse pointer cursor for the entire document is to nest
a div element, with its width and height properties set to 100%,
inside the body element. Then the above code statement will work, except when the
mouse pointer is over a control element, such a button, it will revert to the
default cursor. You need to explicitly change the cursor for each control element.
document.images.bigPicture.src = name;
Using the function shown above as an example, it starts loading the image by setting the
image's src property to the file path of the image. Then it calls the setCursor
function shown below.
This function uses an if statement to test the image element's complete
property. If it's false it sets the cursor style to "wait". Note that it also sets the
cursor style for the button control used to execute the image load. It then sets an interval
timer (1/2 second in this case). At the end of the interval it recalls the setCursor
function. If the complete property is still false, it waits another interval
before recalling the setCursor function.