Почему после вспышки слайдера Flex, если слайды перемещаются быстро?

Recenlty Я выполнял ленивую загрузку в слайдере. Я ленивые изображения загрузки, используя событие after слайдера. Я заметил, что если стрелка иконка быстро нажата, а слайды движутся быстро, событие after не запускается. Вот демо:Почему после вспышки слайдера Flex, если слайды перемещаются быстро?

$('#carousel').flexslider({ 
 
    animation: "slide", 
 
    controlNav: false, 
 
    animationLoop: false, 
 
    slideshow: false, 
 
    itemWidth: 210, 
 
    itemMargin: 5, 
 
    asNavFor: '#slider', 
 
    after: function(slider) { 
 
    console.log("after fired on " + slider.currentSlide); 
 
    
 
    //$("#flex-carousel-H img").slice(((slider.currentSlide + 1)*4), (((slider.currentSlide + 2)*4) + 1)).each(flexLazy); 
 
    } 
 
}); 
 

 
$('#slider').flexslider({ 
 
    animation: "slide", 
 
    controlNav: false, 
 
    animationLoop: false, 
 
    slideshow: false, 
 
    sync: "#carousel" 
 
    
 

 
});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script> 
 

 
<!-- Place somewhere in the <body> of your page --> 
 
<div id="slider" class="flexslider"> 
 
    <ul class="slides"> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <!-- items mirrored twice, total of 12 --> 
 
    </ul> 
 
</div> 
 
<div id="carousel" class="flexslider"> 
 
    <ul class="slides"> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    <li> 
 
     <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" /> 
 
    </li> 
 
    </ul> 
 
</div>

Пожалуйста, попробуйте нажать на значок со стрелкой вправо в нижнем слайдера миниатюр. Вы увидите, что консоль не регистрируется для каждого слайда. Но если мы нажимаем медленно, то консольные журналы для каждого слайда.

Вопрос:
1. Почему не after огня события для каждого слайда, если слайды перемещаются быстро.
2. Как заставить after стрелять, даже если слайды перемещаются быстро.

Благодаря

источник

2016-12-28 user31782

Не уверен, что если вы нашли ответ на этот вопрос уже, но я имел такую же проблему, вместо того, чтобы использовать after обратный вызов, который срабатывает, когда анимация заканчивается, вы должны использовать before обратный вызов. Он запускает «до» анимации, и она всегда срабатывает независимо от того, как быстро вы будете перемещаться по слайдам.

источник

2017-07-25 14:56:01 derickito

Вот что я в конечном итоге использовал. – Banago

Почему после вспышки слайдера Flex, если слайды перемещаются быстро?

ответ

Смежные вопросы