javascript - 为什么背景图像幻灯片放映延迟？

Question

我尝试使用内容滑块制作背景幻灯片，但每个幻灯片在加载页面上都有不同的代码和 javascript，背景图像滑块会延迟，因此背景html 代码显示的内容不正确

    <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代码

<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>

标签： javascriptjqueryhtmlcssslider