Javascript Loading Images

I have a simple script that changes the src and height and width of a
<img>. But when I load the image it changes it size first, streching or
shrinking the previous image, before changing the image. This is because
the picture hasn't loaded yet. How can I have it so that it waits till
the image is loaded before changing the height width and src? I have
been playing around with img.complete and onload but it doesn't want to
work...

[color=blue]
> How can I have it so that it waits till
> the image is loaded before changing the height width and src?[/color]

Best thing is to first preload the image before changing it.

For example:

var preload;
var wait;
var actualImage = document.images[0];

function changeImage(src) {
preload = new Image();
preload.src = src;
wait = window.setInterval("checkImage();", 500);
}

function checkImage() {
if (preload.complete) {
window.clearInterval(wait);
actualImage.src = preload.src;
// do your stuff
}
}