Добавляем прелоадер во время загрузки картинки

Если на вашем сайте размещено много картинок, то могут возникнуть проблема медленной прогрузки изображений. Для того чтобы пояснить для пользователя, что в данной области будет картинка, вебмастера добавляют прелоадер заместо картинки, пока та не прогрузится. Сегодня я вам покажу как можно добавить gif прелоадер

Страница с готовыми прелоадерами — https://icons8.com/preloaders/

Для простого создания прелоадера вы можете объединить изображение и прелоадер в один блок:

HTML код для прелоадера

<div class="imgConteiner">
    <img class="imgElem" src="путь_до_картинки" />
    <img class="imgPreloader" src="путь_до_прелоадера" />
</div>

CSS код для прелоадера

.imgConteiner {
    position: relative;
}
.imgConteiner img.imgElem {
    position: relative;
    z-index: 2;
}
img.imgPreloader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 45%;
    left: 45%;
    z-index: 1;
}