Sequential Image loading

Hi all,

This should be simple but its driving me mad.
I need to load a number of images at the same time, but load them in sequence, so top down: 1,2,3 etc.

Example here

I’m using a loop at the moment, but it doesn’t have to be a loop. I know I need to check if the first image has loaded before loading the next. I’m stuck and would appreicate any advise or suggestions. The solution needs to be dynamic, as it will make up a larger app. with lots of images


image_arr = ["images/hat0", "images/hat1", "images/hat2", "images/hat3", "images/hat4", "images/hat5"];
one_btn.onRelease = function() {
     for (var i = 0; i<image_arr.length; i++) {
          clip = holder_mc.createEmptyMovieClip("thumb"+i+"_mc", i);
          clip.loadMovie(image_arr*+".jpg");
          clip._y = 100*i;
     }
};