Как определить высоту изображения по его адресу?

Question

[Владислав]

День добрый.
Использую lazyload в Slick Slider.
Проблема в том, что у неактивного изображения нет атрибута src, он появляется только когда слайд становится активным. Из-за чего появление изображения получается резким, сдвигающим надписи, если они есть под ним, и никакие transition в css не помогают.
Но вместо src у картинки есть атрибут data-lazy с адресом картинки. Вот я и хочу предварительно, зная адрес изображения, найти его высоту, что хотя бы позволит зарезервировать место на слайде под картинку.
Собственно, вопрос: Как, зная адрес картинки в виде строки вида "upload/images/partners/logo04.jpg", найти её высоту?

Answer 1

[Владислав]

Ответ найден:
Получилось, что проблема решается не так, как подразумевалось в вопросе.

Зная соотношение ширины и высоты будущей картинки (подразумевается, что все картинки в слайдере одинаковые, и параметры изображения известны), мы задаём высоту блока, в котором будет картинка. Например, если у нас картинка 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.

Comments

[WapSter]

Тоже самое в ответе, что тебе дали

Answer 2

[Денис Инешин]

1. Например вы подгоните все картинки под заранее зафиксированные размеры.
2. Или вы заранее на сервере их проверите, соберете данные об их размерах и передадите их на клиент до их фактической загрузки.

Comments

[Владислав]

Ээм... ну, да... хотя бы?