Question

On my website, users can upload large images. I display these images like this:

<img id="userImage" src="userImage.ashx?width=740&id=4fc265d4-a83c-4069-8d6d-0fc78ae2840d">

userImage.ashx is a handler that returns image files based on id, so in this example the image for user 4fc265d4-a83c-4069-8d6d-0fc78ae2840d is returned. You can also set other attributes – in this example only width is given. The image is resized so that it is 740px wide.

I set the src of the image in javascript, once the rest of the page has loaded. By doing this I know how wide the image has to be to fill all the available space:

var width = document.getElementById("userImageHolder").getComputedSize().width;
document.getElementById("userImage").src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;

This all works, but the image doesn’t load until everything else on the page has loaded. I have a complex solution to a simple problem.

Is there a better way to do this? What is the best way to shrink/stretch images to fill an area that is only known once the page loads?

Answer 1

Figure out what the upper limit is for width and height and generate the image to that size, then use max-width/max-height to allow the browser to auto scale it based on the size of the browser window.