Загрузить изображение, когда слайд находится в области просмотра slick.js ⇐ Jquery

[Anonymous]

Я хочу добиться следующего результата: используя slick.js, я хочу загружать некоторые изображения только тогда, когда указанный слайд находится в области просмотра. В консоли я увидел, что слайд получает следующие теги, когда он активен: «slick-current slick-active».
HTML:

Код: Выделить всё

[img]media/bg3.png[/img]


[url=#]Page1[/url]
[url=#]Page2[/url]
[url=#]Page3[/url]
[url=#]Page4[/url]
[url=#]Page5[/url]
[url=#]Page6[/url]

[img]media/second-slide-left.png[/img]

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);
});

Имея этот код, я хочу, чтобы изображение, содержащееся в div с классом «. Third-slide-first», загружалось через несколько секунд, когда слайд с классом «. Third» -slide" появляется в представлении.
Посмотрев на консоль, я увидел, что этот слайд получит классы "slick-current slick-active" в окне просмотра. Использование lazyLoad загрузит изображение сразу, но я хочу, чтобы оно было немного задержано, возможно, немного анимировано с помощью CSS-переходов.

Подробнее здесь: https://stackoverflow.com/questions/725 ... t-slick-js