如果幻燈片快速移動，爲什麼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事件之後不會啓動？

回答

相關問題