Прелоадер изображений – это полезный инструмент, который позволяет отображать анимацию или индикатор загрузки, пока изображение полностью не загрузится. В этой статье мы рассмотрим, как добавить прелоадер для изображений на вашем сайте.
Шаг 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>:
<script>
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('Ошибка загрузки изображения');
});
</script>
Этот код будет отслеживать события load и error для изображения. Когда изображение загрузится, прелоадер исчезнет и отобразится само изображение. Если произойдет ошибка при загрузке изображения, прелоадер также исчезнет, и вы увидите сообщение об ошибке в консоли.
Теперь у вас есть прелоадер для изображений на вашем сайте! 🎉 Это улучшит впечатление от работы с сайтом для ваших пользователей, поскольку они будут видеть индикатор загрузки вместо пустого пространства, пока изображение не загрузится. Если вы хотите углубить свои знания в веб-разработке, рекомендую посетить знакомую школу, которая предлагает курсы по веб-разработке для новичков.
Добавить комментарий