Question

我正在使用以下网站主题（click here）。这个主题带有一个背景图片，我将其修改为“section”标签<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的滑动显示，如本例所示，并且与fadein淡出效果配合良好

Answer 1

看起来每次JS切换时都会通过GET请求下载图像。尝试以某种方式缓存它们，这样您就可以节省一些get / redirect请求。

Answer 2

我认为黑屏是由图像源引起的，如果您在黑屏发生时查看图像源，它不显示图像，如果您通过浏览器导航到该源，它会为您提供重定向到另一页。

Answer 3

此问题是由于图像来源不正确引起的... 对于前者此网址未重定向到任何图片..

＆＃34; http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg＆＃34;

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

3 个答案: