title: Javascript: Hide image before page load then Fade image in, working but not quite right
body: <p>first and foremost no jQuery. I accomplished this on jQuery already but I would like to get it running on Javascript.</p>
  
  <hr>
  
  <p>window.onload = function () {</p>
  
  <pre><code>var target = document.getElementById('homeimg');
  var opacity = 0;
  var fader = setInterval(function() {
  
      if ( opacity &lt;= 100 ) {
          target.style.opacity = ( opacity / 100 );
      }
      else {
          clearInterval(fader);
      }
  
      opacity += .50;
  
      }, 100); // End setInterval function
  </code></pre>
  
  <p>} // Ends window.onload </p>
  
  <hr>
  
  <p>when i hid the div in css ( #homeimg {display:none} and {display: hidden} ), the image does not load at all..</p>
  
  <p>the function works but the image is visible for a split second when the page loads, the image then dissappears and then slowly fades in.</p>
  
  <p>i would like to hide the image so that it only fades in.</p>
  
  <p>thank you</p>