Question about loading images/resizing

[Jaagari]

I am trying to create a slideshow and I want to resize each picture to be as large as possible while retaining the aspect ratio. Anyways, what I came up with works the majority of the time, but sometimes, when I load up a new image into a temporary variable to get the dimensions, said dimensions will be 0. My resizing function ignores 0's so my new image is placed into the spot the previous image had been resized for. I cannot understand why the dimensions would be 0 and the image would still load? What I can do to make sure the image dimensions are there? It rarely ever happens after I have loaded a new image for the first time and if I go back one image and then forward again, the image will be sized correctly. Since this is going to be used in front of people in a business setting, I do not want whoever is running the slide show to have to scroll back and forth like that. Here is the function I am currently using to handle loading the image and getting the dimensions:

function nextImage()
{
	document.getElementById('image').src=makeFilename();
	var tmp = new Image();
	tmp.onload = getImageSize;
	function getImageSize()
	{			
		x = tmp.width;
		y = tmp.height;
	}
	tmp.src = document.getElementById('image').src;
	refreshSize();	
	imageNum++;	
}

x and y are both globals that I use interchangeable to hold the read dimensions or the modified dimensions before they are assigned to my image. getImageSize is a local function because I could not figure out how to pass the image to the function and I still wanted to make sure the image had loaded prior to checking the size (not sure if this matters if the size info is in the image header (but then, why doesn't it always work?)). refreshSize just takes the dimensions grabbed from the temporary image and resizes the image on the page to fill the greatest amount of space. I thought that maybe the 0 dimensions were a result of the image not having finished loading. It has been driving me crazy because I was not having this problem in earlier versions that did not do everything I need the page to do.

My other question was about my resizing. I want to switch right to the resized image, I do not want to have the image resized and then load the new image because it results in the previous image being distorted untill the next image loads (a fraction of a second in most cases, but it is a little jarring and does not look 'professional' enough). I have solved the problem by loading a 1x1 dummy image the same color as my background but I would really like to avoid this external dependency as it involves having to manually move a little image around in an otherwise automated system. Is there a way (entirely in javascript) to achieve a 'seamless' transformation between images? I have also tried rearranging the order of my code, but the image area is always done resizing before the new image is displayed.

Sorry if I am a little long-winded, but I will appreciate any help!

Jaa

 

[Jaagari]

Nevermind, I think I fixed both problem with this:

function nextImage()
{	
	var tmp = new Image();	
	var ctr = 0;
	do
	{
		tmp.src = makeFilename();
		ctr++;
	}while ((tmp.width == 0 || tmp.height == 0) || ctr < 250 );
	x = tmp.width;
	y = tmp.height;
	refreshSize();		
	document.getElementById('image').src=makeFilename();		
	imageNum++;		
}

I tried resetting the source of the image in the loop and checking the count each time and in some cases it would reassign the image soucre 120 times before the dimensions would be available. It takes a little time to do this...just enough to finish loading the image before resizing it, killed two birds with one stone.

I don't know if it is elegant or not...but it seems to work.

 

[jemminger]

images fire an onload event when they're finished loading. perhaps you could hook into this to find the dimensions.


-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big