Loading only last image

Question

This code is loading the xml correctly, populating the mainClipArray correctly, but only adding the last image to the stage.
I think it is not waiting for completeClipLoad() to complete.  I tried removing :void from the function to see if waiting for a return would do it, but no luck.
Any ideas?
CODE:
var myXML:XML;
var xmlLoader:URLLoader = new URLLoader();
var mainClipArray:Array = [];
var counter:int = 0;
var myLoader:Loader = new Loader();
xmlLoader.load(new URLRequest("portfolio.xml"));
xmlLoader.addEventListener(Event.COMPLETE, completeXMLLoad);
function completeXMLLoad(e:Event):void{
    myXML = XML(e.target.data);
    var len:int = myXML.portfolio.unit.length();
    for(var i:int = 0; i<len; i++){
        counter = i;
        mainClipArray[i] = new pane();
        //Load small image
        var smallfilename = myXML.portfolio.unit[i].small.filename;
        myLoader.load(new URLRequest(smallfilename));
        myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeClipLoad);
        mainClipArray[i].x = i * 15;
        addChild(mainClipArray[i]);
function completeClipLoad(e:Event):void{
    trace("made it in");
    mainClipArray[counter].addChild(myLoader);
    trace("added child");

Answer 1

Delaying the progress isn't going to help if you still have only one loader.  I would say that you could move the var myLoader:Loader = new Loader(); line inside the loop so that you have a new loader instance for each loading occurence, but then you would also need to adjust the completeClipLoad function to use the event target (e.target) instead of "myLoader".  But that still wouldn't resolve matters completely because you have that counter variable that will be working as fast as the for loop, with the loop likely finishing before the first item gets loaded... and since your completeClipLoad also makes use of that variable, you'll end up with only the last pane object being used.
If you want to control the order of loading and retain the code in the one place (the other suggestion offered above having the code inside the pane could also be a viable approach), then a better strategy is to to use a programmed loop rather than a for loop, where only one loading occurs at a time and the completion of one loading triggers the next to begin.  Something like (this is just an outline form)...
counter = 0;
imgArray;
function completeXMLLoad(e:Event):void{
     ... // process all the xml into the imgAray
    loadSmallImage(); // start by loading the first image only
function loadSmallImage(){
     // create loader instance
     // assign load complete listener
     // load imgArray[counter]
function loadComplete(e:Event) {
     // process the loaded image in a new pane
     // increment counter
     // if counter is < imgArray.length -> loadSmallImage();