Using MediaTracker to help load images

By David Reilly.

When loading images over a network, a common problem which Java applets face is images not loading properly. On a fast network connection the image will load quickly, but over a slow modem or network connection, images take longer, or may not arrive at all. Users may be confused by blank images - particularly when a sequence of images are being displayed. One simple way to let your users know you're still loading is to use MediaTracker, which allows applets to detect when images are loaded. By David Reilly.

Ask any user who is connected via a modem dial-up connection, what they think about applets, and the answer is frequently that they are slow to load. As one user puts it, "I hate the ugly gray applet box that sits there on the page". Quite often, an applet is loading images for some form of animation - but the user doesn't know what is going on. Other times, applets that fail to load properly just sit there with a blank gray box. This adds to the confusion, because a slow loading applet is often equated with a broken one.

When writing applets, we as programmers have a responsibility to users to let them know what's going on. If your applet loads images over a network connection, it's important to track their progress, and notify the user.

"I hate the ugly gray applet box that sits there on the page.

That's where MediaTracker comes in. MediaTracker allows applets to check to see whether an image has loaded or not. Applets can register images with a MediaTracker object, and then wait until one or all images have loaded. While the images are loading, a message can be displayed to the user. When all the images are loaded, they can then be processed by the applet - for example, displayed as part of an animation. Note though MediaTracker can benefit applications, as well as applets - even when loading from a local file-system, there can be a noticeable delay when many large images are loaded.

MediaTracker is a class in the AWT package. If you're already working with images, the AWT package will be imported. If not, you'll need to add the following lines to the beginning of your code :-

// Import the AWT graphics package
import java.awt.*;

Next, you need to create an instance of java.awt.MediaTracker. You must pass an instance of java.awt.Component to MediaTracker's constructor. An applet is a subclass of Component, so when writing an applet for a web-page, the applet can pass itself by using the this keyword.

// Create a MediaTracker instance,
// to montior loading of images
tracker = new MediaTracker(this);

Once you have a MediaTracker, simply load each image and register it, using the MediaTracker.addImage (Image, int) method. It takes as its first parameter an image, and the idcode of the image as its second parameter. The idcode can be used to inquire about the status of a particular image, rather than a group of images.

// Load the image
Image img = getImage( getDocumentBase(),
                     "picture.jpg" ); 

// Register it with media tracker
tracker.addImage(img, 1);

Once you've registered the image, you can display a text message, or a simple animation, to let your users know that data is loading. Of course, you'll also have to check to see if the images are ready for use, by querying MediaTracker.

There are two ways to check on the progress of images. The first is to continually poll MediaTracker, by using the MediaTracker.checkID(int) method.

// Check to see if it has loaded
if (tracker.checkID(1) == false)
{
	// Not yet, display message .....
}
else
{
	// Display the animation
}

Another way, and often the simpler, is to just wait indefinitely, until all images are loaded. Note that it's best to do this in a separate thread of execution, so that your applet can continue to respond to user events and display a message. This is a blocking operation, whereas the MediaTracker.checkID(int) method is non-blocking and returns immediately.

// Wait until all images have loaded
tracker.waitForAll();

An example applet using MediaTracker

The following example demonstrates the use of MediaTracker. No images will be loaded until you click on the applet. Depending on the speed of your connection, it may take a few seconds, or even a minute to load the images. Note that the applet displays a message, indicating a load is occurring, and that the message disappears once the load is finished. Without MediaTracker, there'd be no way to tell if the image was completely loaded - you might end up seeing only part of the image until it was completely finished.

Please enable Java on your browser to see this applet

MediaTrackerDemo

Getting the source

The source code can be viewed online, or downloaded directly as a .java file.

Running the MediaTrackerDemo

The demonstration applet loads three images, called anim1.gif, anim2.gif, anim3.gif, from the base directory of the page from which the applet is loaded. If you'd like to modify the applet, you could increase the number of images, change the name or location, or change the speed of animation.

Resources

Source code for MediaTrackerDemo.java

Back to main

Copyright 1998, 1999, 2000 David Reilly	Privacy \| Legal \| Linking \| Advertise!
Last updated: Monday, June 05, 2006