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; }
Comments
Post a Comment