javascript - 背景图片幻灯片无法正常工作

Question

我正在为其中一个网站 ( click here ) 使用以下主题。这个主题带有一个背景图片，我将其修改为“部分”标签的多个背景图片<section id="intro" class="intro"></section>

此脚本无法正常运行，因为它有时会在图像之间显示黑屏。

codepen example

<!-- Section: intro -->
<section id="intro" class="intro">

    <div class="slogan">

        <h1><span class="text_color">WELCOME TO SQUAD</span> </h1>

    </div>
    <div class="page-scroll">
        <div class="wow shake" data-wow-delay="0.4s">
        <a href="#latest-tabs" class="btn btn-circle">
            <i class="fa fa-angle-double-down animated"></i>
        </a>
        </div>
    </div>
</section>
<!-- /Section: intro -->

我正在使用一个技巧，并在另一个具有显示属性的 div 中显示所有这些图像，这种方式有助于解决图像转换之间的黑屏问题，因为如果我没有把这些图像放入其中，那么所有图像都会被缓存一个隐藏的 div 然后每个图像都需要时间来下载。

 <div class="background-images" style="display: none !important;">
            <img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
            <img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
            <img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
            <img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
            <img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
        </div>

总的来说，你会注意到它坏了，出于某种原因，它在 FF 以外的其他浏览器中运行良好。

我需要解决这个问题或需要另一个脚本，它可以显示容器 div 的幻灯片显示，如本例所示，并且可以很好地处理淡入淡出效果

Answer 1

看起来每次 JS 切换图像时，图像都是通过 GET 请求下载的。尝试以某种方式缓存它们，以便您可以节省一些获取/重定向请求的时间。