# Preloader help needed to load external jpeg

**URL:** <https://forum.kirupa.com/t/preloader-help-needed-to-load-external-jpeg/294037>\
**Category:** Uncategorized\
**Created:** [August 7, 2009, 9:50am UTC](https://forum.kirupa.com/t/preloader-help-needed-to-load-external-jpeg/294037 "2009-08-07T09:50:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![battery555](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@battery555](https://forum.kirupa.com/u/battery555)\
**Post date:** [August 7, 2009, 9:50am UTC](https://forum.kirupa.com/t/preloader-help-needed-to-load-external-jpeg/294037/1 "2009-08-07T09:50:24Z")

</div>

Hi, will appreciate very much anyone could help me with this. I’m in the midst of building my flash gallery. I need a preloader bar to appear before the external image loaded. And disappear once the external image fully loaded. I learned to build my gallery from [lynda.com](http://lynda.com) online tutorial. Sadly to say the method taught for this particular tutorial was an animated loading gif put on the background of gallery. This is not very elegant when there is alpha fade in and fade out between the images. To illustrate my point below is the code copied from [lynda.com](http://lynda.com) tutorial. Please note that I’m using UI loader component to do this.

```auto

var imageNumber:Number = 1;

function checkNumber ():void{
    next_btn.visible=true;
    back_btn.visible=true;
    
    if (imageNumber==5) {
        next_btn.visible = false;
    }
    //If the imageNumber is = 1, then don't show the back button
    if (imageNumber==1) {
        back_btn.visible = false;
    }
}
checkNumber();
next_btn.addEventListener(MouseEvent.CLICK, nextImage);

function nextImage (evtObj:MouseEvent):void{
    //Adding to the current value +1
    imageNumber++;
    largeImageLoader.source = "TestImages/Picture0"+imageNumber+".jpg";
    checkNumber();
}

back_btn.addEventListener(MouseEvent.CLICK, backImage);

function backImage (evtObj:MouseEvent):void{
    //Subtract 1 from the current value
    imageNumber--;
    largeImageLoader.source = "TestImages/Picture0"+imageNumber+".jpg";
    checkNumber();
}
import fl.transitions.Tween;
import fl.transitions.easing.*;

largeImageLoader.addEventListener(Event.COMPLETE, imageLoaded);

function imageLoaded(event:Event) {
   //trace("image loaded");
   new Tween(largeImageLoader, "alpha", Regular.easeOut, 0, 1, 2, true);
}

```

OK base on my code here, what would be the best way to do it or code it?  
Thanks again