При загрузке «тяжелого» контента – высокораздельных картинок, кастомных шрифтов или скриптов аналитики – пользователь часто видит полупустой экран со сломанной версткой (Layout Shift). Это создает ощущение медленной работы ресурса и ухудшает опыт пользователя (UX).
Прелоадер (Preloader / Loading screen) — элемент интерфейса, который перекрывает содержимое страницы во время рендеринга ресурсов и информирует посетителя о процессе загрузки. Создание качественного загрузчика не требует тяжелых JS-библиотек или плагинов — все это легко реализуется с помощью нескольких HTML строк, плавной CSS-анимации и чистого Vanilla JS.
1. Зачем нужен прелоадер и какие бывают типы?
Главная задача экрана загрузки – уменьшить субъективное время ожидания (Perceived Performance). Когда пользователь видит анимацию, мозг воспринимает задержку как контролируемый процесс, а не сбой системы.
В современной веб-разработке используются три основных подхода к анимации:
- Full-screen Spinner (Классический экранный спинер): Перекрывает всю страницу оверлеем с центрированным крутящим элементом. Лучше всего подходит для сайтов с большим количеством медиа-контента или промо-лендингов.
- Progress Bar (Индикатор прогресса в верхней части): Тонкая полоска в верхней части экрана (как у YouTube или Telegram), которая заполняется по мере загрузки страницы.
- Skeleton Screens (Каркасная анимация): Показ серых блоков-заглушек, формой повторяющих будущий контент. Наиболее современный подход для сложной динамической веб-разработки (
Vue,Nuxt,React).
2. Сравнительный анализ типов загрузчиков
| Тип прелоадера | Преимущества | Область применения |
|---|---|---|
| Full-screen Overlay | Полностью скрывает процесс загрузки тяжелых элементов и FOUT/FOIT шрифтов. Прост в реализации. |
Промо-сайты, фотогалереи, корпоративные ресурсы с большими баннерами. |
| Progress Bar | Минималистичный, не перекрывающий контент, не раздражает при повторных переходах. | Интернет-магазины, многостраничные блоги, новостные порталы. |
| Skeleton Screen | Максимальный уровень UX: создает ощущение, что контент загружается мгновенно. | Веб-приложения (SPA/PWA), личные кабинеты, каталоги товаров с AJAX-фильтрацией. |
3. Пошаговая реализация классического прелоадера (практика)
Реализуем полноэкранный прелоадер с аппаратно ускоренной CSS-анимацией и обработкой события загрузки в Vanilla JS.
Шаг 1: HTML-структура
Разместите этот блок сразу после открывающего тега <body>, чтобы он рендерился первым:
<div id="page-preloader" class="preloader">
<div class="spinner"></div>
</div>
Шаг 2: CSS-стили и анимация
Используем CSS-свойства transform и opacity, которые обрабатываются графическим процессором (GPU), не вызывая повторного Reflow/Repaint страницы:
/* Оверлей во весь экран */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Спинер загрузки */
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Анимация вращения */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Состояние скрытости */
.preloader--hidden {
opacity: 0;
visibility: hidden;
}
Шаг 3: Скрипт Vanilla JS
Мы используем событие window.addEventListener('load'), которое срабатывает только тогда, когда загрузился весь DOM, стили, изображения и шрифты. Также добавляем страховой таймаут (Fallback Timeout) на случай зависания внешних ресурсов:
document.addEventListener('DOMContentLoaded', () => {
const preloader = document.getElementById('page-preloader');
const hidePreloader = () => {
if (preloader && !preloader.classList.contains('preloader--hidden')) {
preloader.classList.add('preloader--hidden');
// Удаляем из DOM после завершения CSS-перехода для освобождения памяти
preloader.addEventListener('transitionend', () => {
preloader.remove();
}, { once: true });
}
};
// Скрываем прелоадер после полной загрузки всех ресурсов
window.addEventListener('load', hidePreloader);
// Страховой таймер (Fallback): если какая-нибудь картинка зависла, скрываем прелоадер через 5 секунд
setTimeout(hidePreloader, 5000);
});
Фронтенд-совет разработчика: Всегда заботьтесь о производительности и крайних случаях (edge cases). Во-первых, обязательно удаляйте элемент прелоадера из DOM-дерева через
.remove()после завершения анимации сокрытия, чтобы он не потреблял оперативную память и не перехватывал клики. Во-вторых, убедитесь, что на время работы прелоадера на тегеbodyне остаетсяoverflow: hidden, иначе прокрутка сайта может оказаться заблокированной при ошибках загрузки.
