rollover code acting up

the rollover code im using is acting up, heres the prob: if i move the mouse over and image that has a rollover while the page is loading it makes the img dissapear and leaves an empty box with the red x on it...what ami i doing wrong?

any and all help is greatly appreciated, thanks.

code:

<script type="text/javascript">

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
</script>