Javascript: Hide image before page load then Fade image in, working but not quite right -

first , foremost no jquery. accomplished on jquery running on javascript.

---

window.onload = function () {

var target = document.getelementbyid('homeimg'); var opacity = 0; var fader = setinterval(function() {      if ( opacity <= 100 ) {         target.style.opacity = ( opacity / 100 );     }     else {         clearinterval(fader);     }      opacity += .50;      }, 100); // end setinterval function 

} // ends window.onload

---

when hid div in css ( #homeimg {display:none} , {display: hidden} ), image not load @ all..

the function works image visible split second when page loads, image dissappears , fades in.

i hide image fades in.

thank you

it's because first 100 milliseconds, opacity default (1). after 100 milliseconds, setinterval function kicks on , starts fade image in.

add right below line set target variable:

target.style.opacity = 0; 

or use css style set opacity 0 without javascript:

#homeimg {   opacity: 0; }