Если на вашем сайте размещено много картинок, то могут возникнуть проблема медленной прогрузки изображений. Для того чтобы пояснить для пользователя, что в данной области будет картинка, вебмастера добавляют прелоадер заместо картинки, пока та не прогрузится. Сегодня я вам покажу как можно добавить 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;
}