# Image load issue

**URL:** <https://forum.kirupa.com/t/image-load-issue/186751>\
**Category:** Uncategorized\
**Created:** [April 24, 2006, 11:28am UTC](https://forum.kirupa.com/t/image-load-issue/186751 "2006-04-24T11:28:30Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rsargent](https://avatars.discourse-cdn.com/v4/letter/r/7ba0ec/32.png) [@rsargent](https://forum.kirupa.com/u/rsargent)\
**Post date:** [April 24, 2006, 11:28am UTC](https://forum.kirupa.com/t/image-load-issue/186751/1 "2006-04-24T11:28:30Z")

</div>

I’m having trouble with some code which works within Flash but stops working when opened in a browser. At the moment, i want flash to load an image and dynamically draw a border around it. This is what i’m trying to do:

1. Draw rectangle - which will eventually display the preloading status
2. Preload image
3. Get image attributes and resize rectangle accordingly to create border
4. Fade in image

It works when i’m testing it in Flash but refuses to work in a browser situation. I’m pretty sure it’s trying to resize the rectangle before the image is loaded but i’m not sure why. Here’s the code:

//prepare picture frame  
function pFrame() {  
createEmptyMovieClip(‘pf’, 1000);  
pf.\_x = 0;  
pf.\_y = 0;  
drawInitFrame();  
preLoadImage();  
}

//draw initial picture frame  
function drawInitFrame() {  
with (pf) {  
beginFill(0xFFFFFF, 100);  
lineStyle(1, 0xFFFFFF, 100);  
moveTo(0,0);  
lineTo(60,0);  
lineTo(60,40);  
lineTo(0,40);  
lineTo(0,0);  
endFill();  
}  
}

//preload the image  
function preLoadImage() {  
createEmptyMovieClip(‘pic’, 1001);  
pic.\_alpha = 0;  
pic.\_x = pf.\_x+5;  
pic.\_y = pf.\_y+5;  
pic.loadMovie(image[p], 1);  
this.onEnterFrame = function() {  
filesize = pic.getBytesTotal();  
loaded = pic.getBytesLoaded();  
if (loaded != filesize) {  
statusTxt.text = "LOADING “+loaded+” / "+filesize;  
}  
else {  
expandFrame();  
this.onEnterFrame = null;  
}  
}  
}

//load the image  
function loadImage() {  
this.onEnterFrame = function() {  
filesize = pic.getBytesTotal();  
loaded = pic.getBytesLoaded();  
if (loaded != filesize) {  
statusTxt.text = "LOADING “+loaded+” / "+filesize;  
}  
else {  
expandFrame();  
this.onEnterFrame = null;  
}  
}  
}

//expand picture frame to fit image  
function expandFrame() {  
textarea = 50;  
pW = pic.\_width+((pf.\_width/pf.\_height)\*10); //frame width needs correction relative to image width for some reason  
pH = pic.\_height+textarea;  
pf.onEnterFrame = function() {  
if (pf.\_width \< pW) {  
pf.\_xscale += (pW-pf.\_width)/5;  
}  
if (pf.\_height \< pH) {  
pf.\_yscale += (pH-pf.\_height)/5;  
}  
else {  
pf.onEnterFrame = null;  
pFade();  
}  
}  
}

//fade image in  
function pFade() {  
pic.onEnterFrame = function() {  
if (pic.\_alpha \< 100) {  
pic.\_alpha += 10;  
}  
else {  
pic.onEnterFrame = null;  
}  
}  
}