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

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 opacit开发者_开发问答y 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.

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');
});

Try this:

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

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

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

should do the trick.

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.