背景图像幻灯片无法正常工作答案

【问题标题】：Background image slideshow not working properly背景图像幻灯片无法正常工作
【发布时间】：2015-07-30 18:12:51
【问题描述】：

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

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

<!-- 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 的幻灯片显示，如本示例所示，并且可以很好地与淡入淡出效果配合使用

【问题讨论】：

寻找类似here的东西？？

标签： javascript jquery html css slideshow

【解决方案1】：

这个问题是由于图片来源不正确造成的... 例如。此 URL 未重定向到任何图像..

“http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg”

【讨论】：

【解决方案2】：

我认为黑屏是由图像源引起的，如果你在黑屏出现时查看图像源，它不会显示图像，如果你通过浏览器导航到该源，它会给你一个重定向到另一个页面。

【讨论】：

【解决方案3】：

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

【讨论】：