Flexslider показывает второй слайд при загрузке страницы

Question

При загрузке моей страницы (пример: http://www.esthergibbons.com) Flexslider быстро мигает содержимое второго слайда и других слайдов перед загрузкой с первого слайда.

Я вижу, что другие люди имели подобные проблемы с Flexslider, но не нашли эту точную ситуацию.

Это может быть проблема с ленивой нагрузкой? Я очень новичок и не знаю, где проверить, чтобы узнать, что вызывает проблему. Или что изменить, чтобы исправить это.

Спасибо за любые рекомендации!

Вот где я создал FlexSlider в HTML:

<!-- 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 файл расслоение плотной: 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>