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

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

09.11.2021
Содержание:

Если на вашем сайте размещено много картинок, то могут возникнуть проблема медленной прогрузки изображений. Для того чтобы пояснить для пользователя, что в данной области будет картинка, вебмастера добавляют прелоадер заместо картинки, пока та не прогрузится. Сегодня я вам покажу как можно добавить 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;
}
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Наши планы
  • Написание материала для курса по разработке ботов на Telegram
  • Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Ссылка на мой KWORK