Javascript Bug - Image Display

Hey all.

This is one of my gallery scripts, and it seems to be bugged. The script is supposed to display an image and modify its size and location so it fits in the 398*398 "area" meant for it. Since most of the images are rectangular, this script is essential - if the images are rather wide or long, it forces them into that "area" and keeps their proportions.

Now, sometimes it works perfectly, but most of the times it just stretches the rectangular image all over the square area (as if it ignores the code lines that modify the size). When I click the button that activates this script again, it resizes the image as it should do - but it rarely works on the first click.

Any ideas what's the problem?

function Exlibris(n)
{
	Current = Now + n;
	
	Display = new Image();
	Display.src = "../Media/Gallery/G" + Current + ".jpg";
	
	X = Display.width;
	Y = Display.height;
	
	if (X == Y)
	{
		document.getElementById("Main").style.width = 398;
		document.getElementById("Main").style.height = 398;
	}
	if (X > Y)
	{
		document.getElementById("Main").style.width = 398;
		document.getElementById("Main").style.height = Y*(398/X);
	}
	if (X < Y)
	{
		document.getElementById("Main").style.width = X*(398/Y);
		document.getElementById("Main").style.height = 398;
	}
	document.getElementById("Main").src = Display.src;
	document.getElementById("Main").style.left = (398 - Main.width)/2;
	document.getElementById("Main").style.top = (98 - Main.height)/2;	
}

Code (markup):

 

Since nobody seems to know what the bug is, I added a link so you can all view the gallery and its code by yourself - http://www.aksinin.com/English/Graphic%20Gallery.Html.

The thing is, it's SUPPOSED to work fine, but it never works on the first click - only on the second.

Please help guys, I have no idea what to do with it, and since many people don't think about double-clicking the icons, I hear a lot of complaints about "deformed" images.

Thanks in advance,

Dan.

 

yeah the reason why it does not work is very simple:

Display = new Image();
Display.src = "../Media/Gallery/G" + Current + ".jpg";
	
X = Display.width;
Y = Display.height;

PHP:

at this point, Display is just an object with a src property (it's common practice these days to not write properties direct but via setAttribute - change that to Display.setAttribute("src", blah);

anyway. it is an object - not a real image. at this point, width and height are unknown - and will remain to be so until you actually inject it into the DOM. only then does the browser load the image and read the values.

the reason that it works after a refresh is simple: cashe. it already 'expects' the width and height

the solution: inject into the dom. one way to do so is to css output an image somewhere off-screen and then read the properties. beware though, doing src = blah does not mean that immediately after you can read the width/height. IT TAKES TIME TO LOAD AN IMAGE. you ought to look for the onload event also...

good luck