How To Fade In A Preloaded Using JavaScript

Question

My JavaScript FadeOut works fine but FadeIN does not work.

I have tried to FadeIn with different codes but the FadeIn effect does not work.

When my page is about to load, my Preloaded just appears like a still image but when the page is done loading, my Preloaded FadeOut smoothly.

I am trying to make my Preloaded FadeIn smoothly just as the FadeOut does.

Below is my JavaScript code.

/* Preloader Javascript */

$(window)

.load(function(){$("#status")

.fadeOut("slow");$("#preloader")

.delay(1000)

.fadeOut(1000)

/* Preloader CSS */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 99999;
    height: 100%;
}
#status {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    padding: 0;
}

<div id='preloader'><div id='status'><img alt='' src='https://www.blogger.com/img/gear.gif'/></div></div>