preloading dynamic jpg's

[writersfusion]

I have a site I built that loads jpg's dynamically by clicking back and forward buttons. How can I call a preloader to work before each picture loads so that people will know the pictures are loading after they click the back and forward buttons? Please check out my site to see what I am talking about: www.jwduncan.com/The_Dunc...index.html (http://www.jwduncan.com/The_Duncan_Family/index.html)

Once you get to the site just click on "April 2002" and you will see the arrows to choose the pictures to see. The pictures load but they take a while on a 56k dial-up, which is why I need a preloader to show up before the picture does.

Here is the code I am using that I got from a MX tutorial:

// initialize variables and properties
stop();
input = 1;
square._alpha = 0;
whichPic = 1;
// initiate change to new image when buttons are clicked
next.onPress = function() {
if (whichPic<10 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic++;
input = whichPic;
}
};
back.onPress = function() {
if (whichPic>1 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic--;
input = whichPic;
}
};
_root.onEnterFrame = function() {
// when a new Photo is selected, fade out, load new image, and fade in
if (square._alpha>10 && fadeOut) {
square._alpha -= 10;
}
if (square._alpha<10) {
loadMovie("images/April2002/image"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 10;
} else {
fadeIn = false;
}
// limit input field
if (input>10) {
input = 10;
}
// initiate change to new image when Enter key is pressed
if (Key.isDown(Key.ENTER)) {
fadeOut = true;
whichpic = input;
}
};
// if a number is entered in the input field but Enter is not pressed, change
// back to current Photo number when clicking anywhere else
inputField.onKillFocus = function() {
input = whichPic;
};


Thank you very much for anyone's help.

jonathan@jwduncan.com