Load BG Image First

So I have a page with a relatively large background file. I say relatively, because it’s the largest single image on the page, but not HUGE, per se. Basically, the page loads other images too, but they are smaller and load first. I’d like to load the background image first, then, load all the others.

I’m not totally sure how to do this, but my best guess so far was with an event listener using the Event.COMPLETE constant, like the code below. deskLoader is the background image. There are also many more images, but this is a sample and the basic idea behind what I’m going for. When I run the code like this, the background image loads, but nothing else and I get no errors.

Thanks for the help,

~Josh

var deskLoader:Loader = new Loader();
addChild(deskLoader);
deskLoader.load(new URLRequest(“images/desk.png”));
deskLoader.addEventListener(Event.COMPLETE, onBgLoaded);
deskLoader.x = -36;
deskLoader.y = -36;

function onBgLoaded(e:Event):void {

var helpLoader:Loader = new Loader();
addChild(helpLoader);
helpLoader.load(new URLRequest(“images/help_coaster.png”));
helpLoader.x = 1195;
helpLoader.y = 465;

var mugLoader:Loader = new Loader();
mugLoader.load(new URLRequest(“images/me.png”));

var mugHolder:Sprite = new Sprite();
mugHolder.x = 660;
mugHolder.y = 61;
mugHolder.buttonMode = true;
mugHolder.addEventListener(MouseEvent.CLICK, onMugSelect);
mugHolder.addChild(mugLoader);
addChild(mugHolder);

var logoLoader:Loader = new Loader();
logoLoader.load(new URLRequest(“images/logobtn.png”));

var logoHolder:Sprite = new Sprite();
logoHolder.x = 872;
logoHolder.y = 50;
logoHolder.buttonMode = true;
logoHolder.addEventListener(MouseEvent.CLICK, onLogoSelect);
logoHolder.addChild(logoLoader);
addChild(logoHolder);

}