CODEWITHSUNDEEP
javascriptjqueryhtmlcssfadein
pianoman
pianoman

Reputation: 815

How to Fade in AFTER the Page has Loaded: Javascript

I am using a fade effect script to fade in my home page, but ideally, I'd like to start the fade once the background image has been loaded.

How could I incorporate this into my existing javascript?

UPDATED Script:

<script type="text/javascript">
$(window).load(function() {
    if (window.localStorage && !localStorage['faded']) {
        localStorage['faded'] = true;
        $('body').hide().fadeIn(500);
    }
});
</script>

CSS:

html {
    background: #000;
    height: 100%;
}
body {
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    height: 100%;
}

Upvotes: 2

Views: 3072

Answers (1)

Francis Kim
Francis Kim

Reputation: 4285

Use $(window).load instead of $(document).ready - the difference is that the latter will run after all your assets are loaded including images.

Upvotes: 3

Related Questions