Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
02 Июн 2023
3 мин
601

Как добавить прелоадер для изображений на сайте

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

Прелоадер изображений – это полезный инструмент, который позволяет отображать анимацию или индикатор загрузки, пока изображение полностью не загрузится. В этой статье мы рассмотрим, как добавить прелоадер для изображений на вашем сайте.

Шаг 1: Создание прелоадера

Сначала создадим анимацию прелоадера. Вы можете использовать любую анимацию по своему усмотрению, но для этого примера мы будем использовать стандартный круговой индикатор загрузки. Создайте файл HTML с следующим содержимым:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример прелоадера</title>
  <style>
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="loader"></div>
</body>
</html>

Этот код создаст круговой индикатор загрузки с помощью CSS-анимации.

Шаг 2: Добавление изображения и прелоадера на сайт

Теперь давайте добавим изображение и прелоадер на ваш сайт. Вставьте следующий HTML-код в нужное место на вашей странице:

<div class="image-container">
  <img src="path/to/your/image.jpg" alt="Описание изображения" style="display:none;">
  <div class="loader"></div>
</div>

Замените path/to/your/image.jpg на путь к вашему изображению.

Курсы по программированию
Помогаем получить новую профессию с гарантией трудоустройства!
Подробнее
Курсы по программированию

Шаг 3: Добавление JavaScript-кода для работы прелоадера

Теперь нам нужно добавить немного JavaScript-кода, чтобы отображать прелоадер только до тех пор, пока изображение не загрузится. Добавьте следующий код в конец вашего HTML-файла, перед закрывающим тегом </body>:

&lt;script&gt;
  const img = document.querySelector('.image-container img');
  const loader = document.querySelector('.image-container .loader');

  img.addEventListener('load', function() {
    loader.style.display = 'none';
    img.style.display = 'block';
  });

  img.addEventListener('error', function() {
    loader.style.display = 'none';
    img.style.display = 'none';
    console.error('Ошибка загрузки изображения');
  });
&lt;/script&gt;

Этот код будет отслеживать события load и error для изображения. Когда изображение загрузится, прелоадер исчезнет и отобразится само изображение. Если произойдет ошибка при загрузке изображения, прелоадер также исчезнет, и вы увидите сообщение об ошибке в консоли.

Теперь у вас есть прелоадер для изображений на вашем сайте! 🎉 Это улучшит впечатление от работы с сайтом для ваших пользователей, поскольку они будут видеть индикатор загрузки вместо пустого пространства, пока изображение не загрузится. Если вы хотите углубить свои знания в веб-разработке, рекомендую посетить знакомую школу, которая предлагает курсы по веб-разработке для новичков.

Тест на профориентацию
За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии
Подробнее
Тест на профориентацию

Добавить комментарий