# Need help adding a preloader

**URL:** <https://forum.kirupa.com/t/need-help-adding-a-preloader/159630>\
**Category:** Uncategorized\
**Created:** [August 18, 2005, 9:37pm UTC](https://forum.kirupa.com/t/need-help-adding-a-preloader/159630 "2005-08-18T21:37:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![DKusz](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@DKusz](https://forum.kirupa.com/u/DKusz)\
**Post date:** [August 18, 2005, 9:37pm UTC](https://forum.kirupa.com/t/need-help-adding-a-preloader/159630/1 "2005-08-18T21:37:39Z")

</div>

I used one of the tutorials on this site to make a photo gallery, and I wanna add a preloader so everytime you click for the next picture, it shows it loading with just a bar and a % number, and then I want it to fade away once the picture has loaded. Can anyone help? Thanks. This is the code I used:

[color=red]//Code written by sbeener (suprabeener)  
/\*  
i wrote this code, but you can use and abuse it however you like.  
the methods are defined in the order which they occur to make it  
easier to understand.  
_/  
// variables ------------------------------------------  
// put the path to your pics here, include the slashes (ie. “pics/”)  
// leave it blank if they’re in the same directory  
this.pathToPics = “C:/Documents and Settings/Jim Bianco/Desktop/jpegs/”;  
// fill this array with your pics  
this.pArray = [“1.jpg”, “2.jpg”, “3.jpg”];  
this.fadeSpeed = 20;  
this.pIndex = 0;  
// MovieClip methods ----------------------------------  
// d=direction; should 1 or -1 but can be any number  
//loads an image automatically when you run animation  
loadMovie(this.pathToPics+this.pArray[0], \_root.photo);  
MovieClip.prototype.changePhoto = function(d) {  
// make sure pIndex falls within pArray.length  
this.pIndex = (this.pIndex+d)%this.pArray.length;  
if (this.pIndex\<0) {  
this.pIndex += this.pArray.length;  
}  
this.onEnterFrame = fadeOut;  
};  
MovieClip.prototype.fadeOut = function() {  
if (this.photo.\_alpha\>this.fadeSpeed) {  
this.photo.\_alpha -= this.fadeSpeed;  
} else {  
this.loadPhoto();  
}  
};  
MovieClip.prototype.loadPhoto = function() {  
// specify the movieclip to load images into  
var p = \_root.photo;  
//------------------------------------------  
p.\_alpha = 0;  
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);  
this.onEnterFrame = loadMeter;  
};  
MovieClip.prototype.loadMeter = function() {  
var i, l, t;  
l = this.photo.getBytesLoaded();  
t = this.photo.getBytesTotal();  
if (t\>0 && t == l) {  
this.onEnterFrame = fadeIn;  
} else {  
trace(l/t);  
}  
};  
MovieClip.prototype.fadeIn = function() {  
if (this.photo.\_alpha\<100-this.fadeSpeed) {  
this.photo.\_alpha += this.fadeSpeed;  
} else {  
this.photo.\_alpha = 100;  
this.onEnterFrame = null;  
}  
};  
// Actions -----------------------------------------  
// these aren’t necessary, just an example implementation  
this.onKeyDown = function() {  
if (Key.getCode() == Key.LEFT) {  
this.changePhoto(-1);  
} else if (Key.getCode() == Key.RIGHT) {  
this.changePhoto(1);  
}  
};  
Key.addListener(this);  
this.onEnterFrame = function() {  
filesize = photo.getBytesTotal();  
loaded = photo.getBytesLoaded();  
preloader.\_visible = true;  
if (loaded != filesize) {  
preloader.preload\_bar.\_xscale = 100_loaded/filesize;  
} else {  
preloader.\_visible = false;  
if (photo.\_alpha\<100) {  
photo.\_alpha += 10;  
}  
}  
};  
[/color]