why background image slide show delays?

Question

I try to make a background slideshow with a content slider but each one with different code and javascript on loading page the background image slider delays so the content not appear correct with background
html code

    <section id="home">
        <div class="" id="whiteback"></div>
        <div class="row" style="position: absolute; margin: auto; z-index: 10; width: 100%; height: 100vh;">
            <div id="slideshow" class="slider__inner">
                <div class="slider__contents">
                    <i class="slider__image fa fa-lightbulb-o"></i>
                    <h1 class="slider__caption ml5"><span class="text-wrapper"><span class="letters letters-left">loream </span> <span class="letters letters-right">ipsum</span> </span></h1>
                    <p class="slider__txt"><a href="#portfolio" class="smoothScroll btn btn-danger">lorem</a> <a href="#contact" class="smoothScroll btn btn-default">ipsum</a></p>
                </div>
                <div class="slider__contents">
                    <i class="slider__image fa fa-newspaper-o"></i>
                    <h2 class="slider__caption">newspaper-o</h2>
                    <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
                </div>
                <div class="slider__contents">
                    <i class="slider__image fa fa-diamond fa-2x"></i>
                    <h2 class="slider__caption">diamond</h2>
                    <p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
                </div>
            </div>
        </div>
    </section>

javascript code

<script>
    var images = new Array('images/download.jpg', 'images/christ.jpg', 'images/download1.jpg');
    var nextimage = 0;

    $("#slideshow > div:gt(0)").hide();
    setInterval(function () {
        if (nextimage >= images.length) { nextimage = 0; }
        $('#home')
            .css('background-image', 'url("' + images[nextimage++] + '")')
            .fadeIn(1000);

        $('#slideshow > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slideshow');
    }, 5200);
</script>