Image loads when refresh

hi, please i need your help on this one. I have the following script function that im calling from the body of my html.

[CODE]function resize(){
var Img = new Image();
var nm=document.getElementById(‘name’).value;
var cp=document.getElementById(‘caption’).value;
var isrc=’profileimages/’+nm;
Img.src = isrc;
var width = Img.width;
var height = Img.height;

if (width >= 480){
ratio = height / width;
height = ratio * 480;
width = 480;
height = Math.round(height);
}
var text='<p style=”position:absolute; left: 181px; top: 136px;”><img src=”‘+isrc+'” width=”‘+width+'” height=”‘+height+'” alt=”‘+cp+'”><br><font size=”-1″ face=”Arial, Helvetica, sans-serif” color=”#333333″>’+cp+'</font></p>’;
document.writeln(text);
}[/CODE]

The image does not load unless I refresh the whole page. What Im doing wrong??

Also in #JavaScript _↴