adding a time delay inside a javascript function for a fade in effect

0
votes

I'm looking to make a website that slowly fades in to hide the loading of the images. Now I've managed to get some javascript that does the fade in but it starts immediatly when the page loads so you still see the individual elements loading when you load the page.

What I would like to do is to add a delay of a second or so before it starts fading in.

Here is what i've got now:

<style>fadein{filter:alpha(opacity=0);opacity:0}</style>

<script>

function fadein(){var fade=0, fadein=document.getElementById("index-wrappper").style,ms=(fadein.opacity==0)?0:1, pace=setInterval(Fade,20);

function Fade() {if(fade<100){fade+=1;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)} else clearInterval(pace)}};

window.onload=fadein;

</script>

I suspect that I need to add the delay in Function fade somehow since Fadein is what set the opacity of the div to 0 on load.

But what exactly do i need to put there? I have slim to none javascript knowledge (which i really need to brush up) and would really appreciate any help with this.

4
javascriptwebfadein
@morja: only retag question. why dont you completely update question. correcting spelling mistakes in it. – Harry Joy
@fearofawhackplanet The question's title also needs changing to reflect this – g t
@Harry: I do not have the privileges to edit it. – morja
@morja: you can edit the question. your edit will be reviewed and being accept by moderators. – Harry Joy
@Harry: Ok, I will do so in the future. – morja

4 Answers

2
votes

First of all, Javascript is not Java.

A simple answer to your question is: use setTimeout and clearTimeout.

But frankly I would urge you not to reinvent the wheel, but to use libraries like jQuery that are built to make such actions easier and support all major browsers. In jQuery you could simply write

$(document).ready(function() {
    $("#index-wrapper").delay(1000).fadeIn('fast');
});
1
votes

Try this:

window.onload = function() {
    window.setTimeout(function() {
        fadein();
    },1000); // 1 sec
}

This delays the fade in with 1 sec, after page load.

0
votes
window.onload=setTimeout("fadein()",1000);

should do the trick.

0
votes

Have you considered using the jQuery library?

It's free, easy to use, does exactly what you want and is cross-browser compatible. Many sites (including this one) use it so you'll be able to get help if you can't get it to do what you want.

Note that the script posted in your question would work only on Internet Explorer, used by less than 50% of people as a web browser.