Load image when the slide is in the viewport slick.js

I want to achieve the following result: Using slick.js, I want to load some images only when the specified slide it's in the viewport. I saw in the console, that the slide receives the following tags when is active "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);
   });

Having this code, I want the image contained in the div with the class ".third-slide-first" to load after a few seconds, when the slide with the class ".third-slide" comes in the view.

After looking in the console, I saw this slide will receive "slick-current slick-active" classes when in the viewport. Using lazyLoad will load the image at once, but I want to have it a bit delayed, maybe a bit animated using css transitions.

You can tryout slick afterchange function,

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

You will get the currentSlide in it and you can use it for your image loading.

You can read more here