Ответ найден:
Получилось, что проблема решается не так, как подразумевалось в вопросе.
Зная соотношение ширины и высоты будущей картинки (подразумевается, что все картинки в слайдере одинаковые, и параметры изображения известны), мы задаём высоту блока, в котором будет картинка. Например, если у нас картинка 1200*900, то соотношение будет 1,3(3) или 75% высоты от ширины.
<div class="parent">
<img data-lazy="img.jpg">
</div>
CSS:
/*Резервирование места под картинку*/
.parent {
width: 100%; /* Если картинка во всю ширину слайда, то и блок с картинкой тоже */
overflow: hidden;
}
.parent::before {
float: left;
padding-top: 75%; /* Высота блока с картинкой = соотношение ширины и высоты картинки */
content: '';
}
/*Плавность появления*/
img {
opacity: 1;
transition: opacity 0.5s;
}
img.slick-loading { /* Класс невидимой картинки, присваимаемый slick'ом */
opacity: 0;
}
Результат: плавное появление картинки в слайде при перелистывании. Никакого JS.
