Javascript Loading Images

[Robbie]

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...

 

[Vincent van Beveren]

How can I have it so that it waits till
the image is loaded before changing the height width and src?

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
}
}