How to determine the height of an image by its address?

Question

JavaScript

Good afternoon.
I use lazyload in Slick Slider.
The problem is that an inactive image doesn't have a src attribute, it only appears when the slide becomes active. Because of what, the appearance of the image turns out to be sharp, shifting the inscriptions, if there are any below it, and no transitions in css help.
But instead of src, the picture has a data-lazy attribute with the address of the picture. So I want to first, knowing the address of the image, find its height, which at least allows you to reserve a place on the slide for the picture.
Actually, the question is: How, knowing the address of the image in the form of a string like "upload/images/partners/logo04.jpg", find its height?

Answer 1

Answer found:
It turned out that the problem is not solved in the way that was implied in the question.
Knowing the ratio of the width and height of the future image (it is assumed that all the images in the slider are the same, and the image parameters are known), we set the height of the block in which the image will be. For example, if we have a picture of 1200*900, then the ratio will be 1.3(3) or 75% of the height of the width.

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

Result: smooth appearance of the picture in the slide when flipping. No JS.

Answer 2

1. For example, you will fit all the pictures to pre-fixed sizes.
2. Or you check them in advance on the server, collect data on their sizes and transfer them to the client before they are actually loaded.