Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

JavaScript Code to Display Wait Cursor While Image Loads

By Stephen Bucaro

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.

function loadPicture(name)
{
   document.images.bigPicture.src = name;
   setCursor();
}

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.

function setCursor()
{
   if(document.getElementById("bigPicture").complete == false)
   {
      document.body.style.cursor = "wait";
      document.getElementById("loadbtn").style.cursor = "wait"; 
      timerID = setInterval(setCursor, 500);
   }
   else
   {
      clearInterval(timerID);
      document.body.style.cursor = "default";
      document.getElementById("loadbtn").style.cursor = "default"; 
   }
}

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.

Menu - More
Java Script Programming

RSS Feed