如果幻灯片快速移动，为什么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事件之后不会启动？

回答

相关问题