当幻灯片位于视口中时加载图像 slick.js

Question

我想实现以下结果：使用

slick.js

，我想仅当指定的幻灯片位于视口中时才加载一些图像。我在控制台中看到，幻灯片在处于活动状态时会收到以下标签“slick-current slick-active”。

HTML：

    <div class="container">
      <div class="slider slider-for">
        <div class="third-slide">
          <img src="media/bg3.png" />

          <div class="third-slide-menu">
            <a href="#" data-slide="3" class="subnav-current">Page1</a>
            <a href="#" data-slide="4">Page2</a>
            <a href="#" data-slide="8">Page3</a>
            <a href="#" data-slide="12">Page4</a>
            <a href="#" data-slide="15">Page5</a>
            <a href="#" data-slide="2">Page6</a>
          </div>

          <div class="third-slide-first">
            <img src="media/second-slide-left.png" />
          </div>
        </div>
       </div>
    </div>

jQ:

$('.slider-for').slick({
    vertical: true,
    slidesToShow: 1,
    arrows: false,
    speed: 0,
    swipe: false
  });
  
   $('a[data-slide]').click(function(e) {
     e.preventDefault();
     var slideno = $(this).data('slide');
     $('.slider-for').slick('slickGoTo', slideno - 1, false);
   });

有了这段代码，我希望当具有“.third-slide”类的幻灯片出现在视图中时，几秒钟后加载具有“.third-slide-first”类的 div 中包含的图像。

查看控制台后，我看到这张幻灯片在视口中将收到“slick-current slick-active”类。使用lazyLoad将立即加载图像，但我想让它有点延迟，也许使用css过渡有点动画。

Answer 1

您可以尝试一下slick afterchange功能，

$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide){
    console.log(currentSlide);
});

您将在其中获取当前幻灯片，您可以使用它来加载图像。

您可以阅读更多这里