AS3 Showing image after load is finish - actionscript-3

Question

So i'm loading picture from xml, and adding them into a movieclip called cv which has a holder called cHolder. Right now the problem is that while the preloader shows it is loading, the cv(s) appeared already. Is there anyway to show all the cv only after the images have finish loading?
Thanks.
for each (var projectName:XML in projectAttributes)
{
//trace(projectName);
var projectDP:XMLList = projectInput.project.(#name == projectName).displayP;
//trace(projectDP);
var cv:MovieClip = new cView();
catNo += 1;
cv.name = "cv" + catNo;
cv.buttonMode = true;
if(catNo % 5 == 0)
{
catY += 137;
catX = -170;
cv.x = catX;
cv.y = catY;
}
else
{
cv.x = catX;
cv.y = catY;
catX += 112;
}
var imageLoader = new Loader();
imageLoader.load(new URLRequest(projectDP));
TweenLite.to(cv.cHolder, 1, {colorTransform:{tint:0x000000, tintAmount:0.8}});
cv.cHolder.addChild(imageLoader);
cv.ct.text = projectName;
projName.push(projectName);
this.addChild(cv);
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageProg);
function imageProg(e:ProgressEvent):void
{
loader.visible = true;
var imageLoaded:Number = e.bytesLoaded/e.bytesTotal*100;
loader.scaleX = imageLoaded/100;
}
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoad);
function imageLoad(e:Event):void
{
loader.visible = false;
}

Answer 1

First, don't put a function inside another function, this won't help for anything and is a bad habit :)
Declare two private variables:
var nImages:uint;
var loadedImages:uint;
Before the loop:
nImages = projectAttributes.length();
loadedImages = 0;
cv.visible = false;
and in the Event.COMPLETE listener:
function imageLoad(e:Event):void
{
loader.visible = false;
loadedImages++;
if (loadedImages == nImages)
{
cv.visible = true;
}
}

Answer 2

var count:int = 0;
var totalClips:int = 0;
cv.visible = false;
for each (var projectName:XML in projectAttributes)
{
++totalClips;
//trace(projectName);
var projectDP:XMLList = projectInput.project.(#name == projectName).displayP;
//trace(projectDP);
var cv:MovieClip = new cView();
catNo += 1;
cv.name = "cv" + catNo;
cv.buttonMode = true;
if(catNo % 5 == 0)
{
catY += 137;
catX = -170;
cv.x = catX;
cv.y = catY;
}
else
{
cv.x = catX;
cv.y = catY;
catX += 112;
}
var imageLoader = new Loader();
imageLoader.load(new URLRequest(projectDP));
TweenLite.to(cv.cHolder, 1, {colorTransform:{tint:0x000000, tintAmount:0.8}});
cv.cHolder.addChild(imageLoader);
cv.ct.text = projectName;
projName.push(projectName);
this.addChild(cv);
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageProg);
function imageProg(e:ProgressEvent):void
{
loader.visible = true;
var imageLoaded:Number = e.bytesLoaded/e.bytesTotal*100;
loader.scaleX = imageLoaded/100;
}
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoad);
function imageLoad(e:Event):void
{
++count;
if(count == totalClips){
cv.visible = true;
}
loader.visible = false;
}
}
So you might want to adapt things a little, in case I'm counting in the wrong spots etc for your implementation but as you can see the solution is simple, you count the total number of clips being processed for loading from the XML, then as the images are loaded and call the OnComplete callback, you increment another count until you've seen that you've loaded all processed images, and set the container to visible.