[RESOLVED] re-sizing images - HTML Forums

nickbfromct · 10-29-2009, 12:29 PM

I am trying to re-size images with javascript and i can get the image to whatever I want BUT.... I don't want the image to show up before it re-sizes. I tried to make the image invisible while I re-size it but for some reason it won't resize while invisible. HERES THE CODE:

Code:

var desiredW = 420;

function resizeimage()
	{
		var imgW = document.getElementById('mainImage').width;
		
		if(imgW > desiredW)
		{
			document.getElementById('mainImage').width = desiredW;
		}
		
		document.getElementById('mainImage').style.visibility = "visible";
		document.getElementById('mainImage').style.display = "block";
	}

The event is body onload. Anyone have any ideas?

¥åßßå · 10-30-2009, 03:46 AM

Whilst your images are loading, position them absolute a mile off the top/left of teh screen. When they've loaded and you've resized them, remove the position:absolute and they'll slip into the correct place

¥

nickbfromct · 10-30-2009, 04:14 PM

Quote:

Originally Posted by ¥åßßå

Whilst your images are loading, position them absolute a mile off the top/left of teh screen. When they've loaded and you've resized them, remove the position:absolute and they'll slip into the correct place

¥

you know...I thought of that but I didn't want to go through the hassle of finding the position of the image. I found a fix though. I was using visibility: hidden and display: none to make my image insvisible then resizing it then making it visible again. What I needed to use was filter: alpha(opacity=0) and opacity: 0 And then after I resize I set them to 100 and 1. Worked like a charm. www.ballinornot.com to see the results