5 эффективных техник прелоадеров для изображений на сайте

Для кого эта статья:

• Веб-разработчики
• Дизайнеры пользовательского интерфейса

• Владельцы и менеджеры сайтов, заинтересованные в улучшении пользовательского опыта

  Знакомо ли вам чувство досады, когда пользователи покидают ваш сайт из-за медленной загрузки картинок? 🤔 Непрогружающиеся изображения — один из главных киллеров конверсии. К счастью, прелоадеры для изображений способны удерживать внимание посетителей до полной загрузки контента. В этой статье я расскажу о пяти эффективных техниках добавления прелоадеров, которые существенно улучшат UX вашего сайта и заставят пользователей забыть о раздражающем ожидании.

Стремитесь стать востребованным веб-разработчиком, умеющим создавать плавные интерфейсы без раздражающих скачков контента? На курсе Обучение веб-разработке от Skypro вы освоите не только базовые технологии, но и продвинутые техники оптимизации пользовательского опыта. Среди прочего вы научитесь грамотно внедрять прелоадеры и другие микровзаимодействия, которые значительно повышают удержание пользователей на сайте. Реальные проекты в портфолио сделают вас ценным специалистом на рынке труда!

Что такое прелоадер и почему он важен для сайта

Прелоадер — это визуальный элемент или анимация, которая отображается пользователю во время загрузки контента сайта, особенно изображений. Он информирует посетителя о том, что процесс загрузки идет, и контент скоро появится. По сути, это своеобразный "мостик" между пустым пространством и финальным контентом.

Статистика показывает, что 53% пользователей покидают сайт, если страница загружается дольше 3 секунд. Исследования Google подтверждают: вероятность отказа увеличивается на 32% при увеличении времени загрузки с 1 до 3 секунд. Прелоадеры не ускоряют сам процесс загрузки, но существенно улучшают воспринимаемую скорость сайта.

Максим Петров, UX-директор

Однажды мы работали над редизайном крупного интернет-магазина. Клиент жаловался на высокий процент отказов — около 40% посетителей покидали сайт в первые 5 секунд. Мы провели аудит и обнаружили, что страницы с товарами содержали галереи высококачественных изображений, которые долго грузились, особенно на мобильных устройствах. Пользователи видели пустую страницу и закрывали вкладку.

Мы внедрили систему прелоадеров: заменили пустые области мерцающими скелетонами, добавили счетчик загрузки и миниатюрные превью. После запуска процент отказов упал до 15%, а конверсия выросла на 28%. Прелоадер не ускорил загрузку физически, но создал впечатление работающего сайта, заставив пользователей дождаться полного контента.

Основные преимущества использования прелоадеров:

• Улучшение пользовательского опыта — вместо белого экрана посетитель видит визуальные индикаторы загрузки
• Снижение показателя отказов — пользователи с большей вероятностью дождутся загрузки страницы
• Улучшение восприятия бренда — стильный прелоадер может усилить визуальную идентичность
• Предотвращение FOUC (Flash Of Unstyled Content) — избегание резких скачков контента
• Повышение вовлеченности — анимация привлекает внимание и увеличивает время на сайте

CSS-анимация: создаем простой спиннер для загрузки

Спиннер — пожалуй, самый распространенный и простой в реализации тип прелоадера. Он идеально подходит для быстрой интеграции в существующие проекты без внесения серьезных изменений в архитектуру. Реализация спиннера требует минимальных знаний CSS и почти не увеличивает время загрузки страницы. 🔄

Вот как создать базовый спиннер с помощью чистого CSS:

.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #3498db;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

Для интеграции этого спиннера с процессом загрузки изображений нам потребуется небольшой JavaScript-код:

document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('img[data-src]');
const imgContainers = [];

// Создаем контейнеры и спиннеры для каждого изображения
images.forEach(img => {
const container = document.createElement('div');
container.style.position = 'relative';
container.style.minHeight = '100px';

const spinner = document.createElement('div');
spinner.className = 'spinner';

img.parentNode.insertBefore(container, img);
container.appendChild(spinner);
container.appendChild(img);

imgContainers.push({ container, spinner, img });

// Устанавливаем обработчик загрузки для каждого изображения
img.onload = function() {
spinner.style.display = 'none';
img.style.opacity = '1';
};

// Запускаем загрузку изображения
img.src = img.getAttribute('data-src');
});
});

Важно учитывать доступность. Добавьте атрибут role="status" и aria-label="Loading" к вашему спиннеру, чтобы программы чтения с экрана могли правильно интерпретировать его для пользователей с ограниченными возможностями.

Можно создавать более сложные и уникальные спиннеры, используя CSS. Вот несколько популярных вариаций:

• Пульсирующий круг — эффект пульсации достигается с помощью изменения размера и прозрачности
• Вращающиеся точки — несколько элементов, движущихся по круговой траектории
• Прогресс-бар — линейная анимация, которая показывает примерный прогресс загрузки
• Текстовый прелоадер — анимированный текст, например, "Загрузка..." с последовательно появляющимися точками

Скелетоны вместо картинок: элегантное решение

Скелетонная загрузка (skeleton loading) представляет собой более продвинутый подход к отображению загружаемого контента. Вместо спиннера или пустого пространства, пользователю показывается приблизительный макет будущего контента — схематические прямоугольники и линии, имитирующие структуру загружаемого изображения или компонента. Эта техника используется ведущими сервисами вроде YouTube и LinkedIn, создавая ощущение, что контент загружается быстрее, чем есть на самом деле.

Антон Седов, Frontend Team Lead

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

Решили внедрить скелетонную загрузку для всех изображений в ленте. Вместо классических спиннеров создали динамические скелетоны, которые точно соответствовали размерам будущих картинок с легким мерцающим эффектом. После внедрения мы получили неожиданный результат: пользовательские метрики показали, что люди стали воспринимать сайт как "более быстрый", хотя фактическая скорость загрузки не изменилась. Более того, время, проведенное на сайте, выросло на 18%, а количество просмотренных страниц — на 23%.

Базовая CSS-реализация скелетона для изображений выглядит так:

.skeleton-loader {
background: #e2e5e7;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0)
);
background-size: 200px 100%;
background-repeat: no-repeat;
background-position: left -200px top 0;
animation: shine 1.5s infinite;
width: 100%;
height: 100%;
border-radius: 4px;
}

@keyframes shine {
to {
background-position: right -200px top 0;
}
}

А вот как интегрировать скелетоны в вашу страницу с помощью JavaScript:

function createImageWithSkeleton(imgSrc, width, height, altText) {
// Создаем контейнер для изображения и скелетона
const container = document.createElement('div');
container.style.position = 'relative';
container.style.width = width + 'px';
container.style.height = height + 'px';
container.style.overflow = 'hidden';

// Создаем скелетон
const skeleton = document.createElement('div');
skeleton.className = 'skeleton-loader';

// Создаем изображение
const img = document.createElement('img');
img.style.position = 'absolute';
img.style.top = '0';
img.style.left = '0';
img.style.width = '100%';
img.style.height = '100%';
img.style.opacity = '0';
img.style.transition = 'opacity 0.3s ease-in-out';
img.alt = altText || '';

// Добавляем обработчик для скрытия скелетона при загрузке изображения
img.onload = function() {
skeleton.style.display = 'none';
img.style.opacity = '1';
};

// Сначала добавляем элементы в DOM, затем устанавливаем src
container.appendChild(skeleton);
container.appendChild(img);

// Устанавливаем источник изображения
setTimeout(() => {
img.src = imgSrc;
}, 10);

return container;
}

// Пример использования
const imageContainer = document.querySelector('#image-container');
imageContainer.appendChild(createImageWithSkeleton('path/to/image.jpg', 300, 200, 'Описание изображения'));

Эффект постепенного проявления изображений с JavaScript

Эффект постепенного проявления изображений (blur-up technique) — одно из самых элегантных решений для прелоадеров. Этот подход подразумевает сначала загрузку очень маленькой версии изображения (обычно 20-40 пикселей в ширину), которая затем растягивается до нужного размера и размывается с помощью CSS-фильтров. Пока основное изображение загружается, пользователь видит размытую версию, которая дает представление о содержимом. Когда оригинальное изображение готово, происходит плавный переход от размытой версии к четкой. 🌄

Для реализации этой техники потребуется несколько компонентов:

1. Маленькая версия каждого изображения (превью)
2. JavaScript-код для управления загрузкой и переходами
3. CSS для создания эффекта размытия и анимации

Вот базовая реализация с использованием JavaScript:

const blurUpImages = document.querySelectorAll('.blur-up-img');

blurUpImages.forEach(container => {
const img = container.querySelector('img');
const placeholder = container.querySelector('.placeholder');

// Загрузка основного изображения
const fullImage = new Image();
fullImage.src = img.dataset.src;

fullImage.onload = function() {
// Когда изображение загружено, меняем src и удаляем размытие
img.src = fullImage.src;
container.classList.add('loaded');

// Плавно скрываем плейсхолдер после анимации
setTimeout(() => {
placeholder.style.display = 'none';
}, 500);
};
});

Соответствующий CSS для создания эффекта размытия:

.blur-up-container {
position: relative;
overflow: hidden;
}

.blur-up-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

.placeholder {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: blur(20px);
transform: scale(1.1);
}

.blur-up-img.loaded img {
opacity: 1;
}

.blur-up-img.loaded .placeholder {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

HTML-структура для такого изображения:

<div class="blur-up-container blur-up-img">
<div class="placeholder" style="background-image: url('tiny-preview.jpg');"></div>
<img data-src="large-image.jpg" src="" alt="Описание изображения" />
</div>

Для оптимальной производительности учитывайте следующие рекомендации:

• Размер превью — оптимально 20-40px по ширине, сжатое с низким качеством до 1-2KB
• Base64-кодирование — маленькие превью можно внедрять прямо в HTML как data-URI
• Прогрессивные JPEG — альтернативный формат, который изначально загружается с низким качеством
• WebP-формат — современный формат с лучшим сжатием для превью
• Автоматизация — используйте инструменты сборки для автоматического создания превью

Эта техника особенно эффективна для сайтов с большими фоновыми изображениями, фотогалереями и интернет-магазинов. Она не только улучшает визуальное восприятие, но и дает пользователю понять, что сайт активно загружается, а не просто "завис".

Библиотеки и готовые решения для добавления прелоадера

Если вам не хочется писать собственные реализации прелоадеров с нуля, существует множество готовых библиотек, которые значительно упрощают эту задачу. Они предлагают разнообразные анимации, настройки и дополнительную функциональность. 📦

Рассмотрим наиболее популярные библиотеки для добавления прелоадеров:

• Lazy Load — легковесная библиотека для отложенной загрузки изображений с настраиваемыми прелоадерами
• Lozad.js — высокопроизводительная библиотека ленивой загрузки, использующая Intersection Observer API
• react-content-loader — создание скелетонных прелоадеров для React-приложений
• Vue-Skeleton-Loader — аналогичное решение для Vue.js
• GSAP — мощная библиотека для создания сложных анимаций, включая прелоадеры
• NProgress — минималистичный прогресс-бар для Ajax-приложений
• PleaseWait.js — библиотека для создания полноэкранных прелоадеров

Пример использования Lozad.js:

<!-- HTML -->
<img class="lozad" data-src="image.jpg" data-placeholder-background="#f6f6f6" alt="Описание" />

<!-- JavaScript -->
document.addEventListener('DOMContentLoaded', function() {
const observer = lozad('.lozad', {
loaded: function(el) {
el.classList.add('loaded');
},
rootMargin: '10px 0px', // Подгружает изображения немного раньше, чем они появятся в видимой области
});
observer.observe();
});

<!-- CSS -->
.lozad {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.lozad.loaded {
opacity: 1;
}

Для создания скелетонов в React с помощью react-content-loader:

import ContentLoader from "react-content-loader"

const ImageLoader = () => (
<ContentLoader 
speed={2}
width={400}
height={300}
viewBox="0 0 400 300"
backgroundColor="#f3f3f3"
foregroundColor="#ecebeb"
>
<rect x="0" y="0" rx="5" ry="5" width="400" height="300" />
</ContentLoader>
)

export default ImageLoader;

А вот как можно использовать GSAP для создания более сложной анимации прелоадера:

<!-- HTML -->
<div class="preloader">
<div class="preloader__item preloader__item--1"></div>
<div class="preloader__item preloader__item--2"></div>
<div class="preloader__item preloader__item--3"></div>
</div>
<img id="main-image" src="" data-src="large-image.jpg" alt="Описание" />

// JavaScript с GSAP
import { gsap } from "gsap";

const preloader = document.querySelector('.preloader');
const image = document.getElementById('main-image');

// Анимация прелоадера
gsap.to(".preloader__item", {
duration: 0.5,
scale: 1.2,
y: -15,
stagger: 0.15,
repeat: -1,
yoyo: true,
ease: "power1.inOut"
});

// Загрузка изображения
const img = new Image();
img.src = image.dataset.src;
img.onload = function() {
// Анимация скрытия прелоадера и показа изображения
gsap.to(preloader, {
duration: 0.5,
opacity: 0,
onComplete: function() {
preloader.style.display = "none";
image.src = img.src;
gsap.fromTo(image, 
{ opacity: 0, scale: 0.9 },
{ opacity: 1, scale: 1, duration: 0.5 }
);
}
});
};

При выборе библиотеки учитывайте следующие критерии:

• Размер библиотеки — важно для оптимизации производительности
• Поддержка браузеров — некоторые современные API могут не работать в старых браузерах
• Кастомизация — возможность настройки под дизайн вашего сайта
• Интеграция с фреймворками — специальные версии для React, Vue, Angular и т.д.
• Доступность — поддержка ARIA-атрибутов и клавиатурной навигации

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