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>

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

1 个答案: