Question

Recenlty我一直在flex滑块中实现延迟加载。我使用flex滑块的after事件延迟加载图像。我观察到，如果快速按下箭头图标并且幻灯片快速移动，则不会触发after事件。这是一个演示：

$('#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开火。

由于

Answer 1

不确定你是否已找到答案，但我遇到了同样的问题，而不是使用动画结束时触发的after回调，你应该使用before回调。它触发＆＃34;之前＆＃34;动画开始，无论你在幻灯片上滑动多快，它都会一直闪现。

如果幻灯片快速移动，为什么在Flex滑块事件发生后不会触发？

1 个答案: