Flexslider 在加载页面时显示第二张幻灯片

Question

在加载我的页面时（例如：http://www.esthergibbons.com），Flexslider 在加载第一张幻灯片之前会快速闪烁第二张幻灯片和其他幻灯片的内容。

我看到其他人也遇到过类似的 Flexslider 问题，但没有找到这种确切的情况。

这可能是延迟加载的问题吗？我非常新手，不知道在哪里检查以查看导致问题的原因。或者改变什么来解决它。

感谢您的指导！

这是我在 HTML 中设置 Flexslider 的地方：

<!-- FlexSlider  -->
<section class="flexslider home">
    <ul class="slides">
        <li><img src="http://www.esthergibbons.com/images/weddings/002-bride-and-groom-in-baseball-pit.jpg" alt="Black and white wedding photo of bride and groom sitting on bench inside of rustic baseball pit, seen through hole in a chain-link fence" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-entrance-fountain-happy.jpg" alt="Emotional wedding photo of bride and groom entering ceremony hand in hand at Chateau Saint-Ambroise, Montreal" /></li>          
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-photo-mumford-lights-abbaye-oka.jpg" alt="Creative portrait of wedding couple dancing in doorway of rustic hallway lit with hanging lights, at Abbaye d'Oka, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-wiping-grooms-eyes-ceremony.jpg" alt="Photojournalistic wedding photo of bride reaching across to wipe groom's eyes during their wedding ceremony at Les Trois Tilleuls chapel in Monteregie, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-groom-daughter-walking-hand-in-hand.jpg" alt="A calm photo of quiet moment as the groom walks away hand in hand with his young daughter" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-groom-natural-wedding-photo-walking-away.jpg" alt="A natural photo of the bride and groom walking in a rustic wedding location" /></li>
        </ul>
</section>
<!-- FlexSlider / End -->

这里是 Flexslider js 文件的位置： http://www.esthergibbons.com/scripts/jquery.flexslider.js

Answer 1

幻灯片在插件初始化之前显示。通过 CSS 隐藏幻灯片，以便在插件初始化之前不会显示图像，然后使用 start() 回调在 flexslider 初始化后显示所有内容。

$('.flexslider').flexslider({
    start: function(){
         $('.slides').show(); 
    },
  });

.slides {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script>

<section class="flexslider home">
    <ul class="slides">
        <li><img src="http://www.esthergibbons.com/images/weddings/002-bride-and-groom-in-baseball-pit.jpg" alt="Black and white wedding photo of bride and groom sitting on bench inside of rustic baseball pit, seen through hole in a chain-link fence" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-entrance-fountain-happy.jpg" alt="Emotional wedding photo of bride and groom entering ceremony hand in hand at Chateau Saint-Ambroise, Montreal" /></li>          
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-photo-mumford-lights-abbaye-oka.jpg" alt="Creative portrait of wedding couple dancing in doorway of rustic hallway lit with hanging lights, at Abbaye d'Oka, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-wiping-grooms-eyes-ceremony.jpg" alt="Photojournalistic wedding photo of bride reaching across to wipe groom's eyes during their wedding ceremony at Les Trois Tilleuls chapel in Monteregie, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-groom-daughter-walking-hand-in-hand.jpg" alt="A calm photo of quiet moment as the groom walks away hand in hand with his young daughter" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-groom-natural-wedding-photo-walking-away.jpg" alt="A natural photo of the bride and groom walking in a rustic wedding location" /></li>
        </ul>
</section>