I can use some help w a quick image resizer which keeps the proportions and quality

how can i make it so that the image doesnt appear till it loads completely
as it is now it appears its full size then waits till it is fully loaded to respond to the resize function…which looks like crap

code below:
thanks

am i clear? any ideas?

<html>
<head>
<title>Image</title>
<style type=“text/css”>
img {

}
#Layer1 {
position:relative;
width:100%;
height:100%;
z-index:1;
top:20px;
}
</style>

<script type=“text/javascript”>

function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = “auto”
document.images[0].style.height = “90%”
}
else
{
document.images[0].style.width = “90%”
document.images[0].style.height = “auto”
}
}
</script>

<div id=“Layer1”><body onresize=“resizeImage()”>
<center><img onload=“resizeImage()” margin=“0” border=“0” src=“look.gif”></center>
</body>
</div>

</head>
</html>