Как сделать прелоадер на сайте
Прелоадер, его создание и варианты оформления
Как сделать, оформить, установить и когда нужно использовать preloader
Прелоадер — это заглушка (анимационный или другой эффект), которая показывается прежде чем полностью загрузится страница сайта
В этой статье рассмотрим как его сделать, установить, оформить и самое главное, когда его нужно использовать, а когда нет.
Несмотря на то, что почти все зарубежные шаблоны используют прелоадеры, я противник их применения в таком виде как они подаются. А именно: у нас закрыт сайт, и что-то там прыгает, пока полностью не загрузится страница. Это потому что:
Но этот подход может пригодится для лендингов или главных страниц сайта, где очень много скриптов, фотографий, присутствует модный слайдер с HD фото и т.д. В этом случае, чтобы посетитель не видел сборку страницы и не пугался этому процессу, можно ее закрыть и показать прелоадер. Это полезно еще в том случае, когда некоторые скрипты активируются после полной загрузки страницы.
Но и тут не стоит забывать, что если вы грузите что то с другого сайта, который недоступен, прелоадер может висеть минутами.
Создавая прелоадер нужно помнить, что красивый анимационный эффект может весить очень много, и в итоге посетитель сайта будет ждать пока загрузится он, а потом еще ждать когда вместо него покажется нужная ему информация.
Создание прелоадера:
Создается и работает все просто: мы создаем фиксированный слой на весь экран, на нем размещаем картинку или блок анимации, а после полной загрузки страницы все это убираем.
Делаем прелоадер для вашего сайта
Приветствую, сегодня покажу вам, как сделать прелоадер для вашего сайта. Preloader служит для того, что бы улучшить у пользователя впечатление о сайте. Ведь страница не загружается мгновенно. Картинки грузятся долго, во время их прогрузки сайт будет «прыгать». Так же нужно время для загрузки шрифтов, во время чего сайт так же будет постоянно видоизменятся. Поэтому намного лучше на время загрузки сайт скрыть, и показать пользователя приятную анимацию. После загрузки, просто скрываем его, и пользователь видит сразу красивый, плавный сайт. Этот момент очень сильно улучшает восприятие.
Базовая структура
Далее пишем CSS код, для того, что бы скрыть всю страницу, и отцентровать его.
Скрываем прелоадер после загрузки (чистый JavaScript)
Так же необходимо добавить несколько строк CSS кода для плавности (ниже распишу для чего конкретно)
Как это работает?
При помощи window.onload, мы проверяем, загружена ли страница. После загрузки — исполняем написанный ниже код. Создаем переменную, в которую помещаем div с id=’preloader’. После чего, добавляем к этому элементу класс ‘hide-preloader’. Как видно из CSS кода, при добавлении класс запускает анимацию, в которой уменьшает непрозрачность элемента с 1 до 0 за 1 секунду. После анимации прелоадер уже не будет виден, и на этом можно было и закончить, но возникает проблема. Элемент никуда не исчез, а так и покрывает всю страницу, находясь НАД всеми элементами. Это значит, что все элементы ПОД ним не интерактивны (тоесть все ссылки/формы/кнопки работать не будут). Для этого, после загрузки страницы мы запускаем таймер на 990 секунду (немного короче анимации). После окончания таймера, мы добавляем класс ‘preloader-hidden’ к элементу, окончательно скрывая его со страницы. Вы можете подумать, что можно было просто скрыть элемент, с помощью display: none. Это так, но тогда элемент пропадает очень резко, так как display: none — нельзя анимировать.
И вот результат:
Скрываем прелоадер с помощью jQuery
В этом случае нам не нужно добавлять CSS классы и т.д. Только подключить jQuery и написать этот код:
Спасибо, что прочитали. Если у вас остались любые вопросы, задавайте их в комментариях, всем помогу. Так же буду благодарен, если вы прочитаете другие мои статьи:
Делаем полноценный JS-прелоадер для AJAX-приложения
Многие программисты оптимизируют JavaScript и CSS-код, чтобы страница грузилась быстрее.
Но не все они делают прелоадеры, которые дают пользователю эффект субъективно более быстрой загрузки.
Способ №1. Дешево и сердито.
Идея проста — необходимо поместить по центру картинку, которая будет показывать пользователю, что страница все еще загружается. Код довольно прост, пишем сразу после :
В результате у нас сразу после загрузки появляется блок с анимированным прогрессбаром по центру страницы. Параметр overflow нужно менять для того, чтобы не появилась полоса прокрутки и пользователь не мог прокрутить вниз и поглядеть на содержимое странички.
Потом, когда все загрузилось — нужно убрать прелоадер и установить overflow в положение visible.
Эту часть кода я поместил в файл с JS-функциями, plreloader1.js
Если делать прогрессбар из анимированного GIF-рисунка, то он может получиться слишком тяжелым, порой даже больше самой странички, где его размещают.
Поэтому лучше нарисовать полоску (например, такую), поставить ее как фон у блока с ID preloader и двигать бекграунд-позишн по таймеру.
И после загрузки делаем вот что:
Результат работы можно посмотреть тут.
Поэтому предлагается использовать…
Поставим неактивную как фон, а активную сделаем фоном у дива, для которого будем менять ширину в зависимости от процента загрузки.
progbar_ph.gif – это картинка высотой в 1 пиксель и шириной с нашу полосу прокрутки (данный пример глючит без нее в IE, и я пока не нашел другого способа выровнять по центру див с прогрессбаром).
Стили такие же, как и в предыдущем способе, разве что
Теперь осталось сделать небольшой скрипт, который будет динамически подгружать содержимое сайта и картинки. Он нужен для того, чтобы прогрессбар показывался и изменялся еще до того, как скачается используемый фреймворк и другие JS-файлы.
Я реализовал 2 метода — первый простой, включается так:
непосредственно перед
Как сделать прелоадер для сайта?
В этой статье разберём процесс создания прелоадера для сайта как на чистом CSS, так и с использованием изображений.
Назначение прелоадера
Как создать прелоадер страницы
На самом деле создать прелоадер очень просто.
Для этого нужно сразу после открывающего тега body добавить код (HTML структуру прелоадера). С помощью CSS его необходимо настроить так, чтобы он занимал всю область viewport и находился над содержимым страницы. В качестве прелодера обычно используют анимированную картинку (svg, gif), или CSS-анимацию.
В процессе загрузки страницы её контент находится под прелодером. Пользователь видит только анимированную картинку.
Прелоадер на чистом CSS
Этапы создания прелодера на чистом CSS:
1. Добавить после открывающего тега body следующий HTML-код:
2. Создать следующие стили:
3. Вставить сценарий, который будет добавлять к элементу body класс loaded после полной загрузки страницы:
Этот скрипт очень резко скрывает прелоадер. Чтобы этот процесс улучшить, а именно выполнить это с анимацией можно использовать вместо вышеприведённого сценария этот:
Прелоадер в виде анимированной svg иконки
Процесс создания прелоадера в виде анимированной svg иконки не будет сильно отличаться от примера с использованием CSS-анимации.
1. Создадим HTML-разметку прелоадера и разместим её сразу же после открывающего тега body :
В качестве svg можно использовать любое другое изображение.
3. Поместим на страницу следующий сценарий:
Этот сценарий на чистом JavaScript. Но его можно написать с использованием библиотеки jQuery.
В этом случае он будет выглядеть следующим образом:
Пример прелоадера с градиентным фоном:
Прелоадер с использованием анимированной gif картинки
В качестве изображения можно использовать не только svg, но и gif картинку.
CSS для прелоадера:
Небольшая коллекция анимированных gif-изображений имеется в этом архиве.
Вариант прелоадера с использованием jQuery функции fadeOut
Пример скрипта нв jQuery для скрытия прелоадере с использованием функции fadeOut:
Как сделать простой Preloader при загрузке страниц
Preloader при загрузке страниц чаще всего нужен в том случае, если необходимо, чтобы пользователь начал пользоваться сайтом только после загрузки всех ресурсов (изображения, javascript-код и так далее). Но нужно использовать его с осторожностью, так как пока все ресурсы не будут загружены, контент остаётся недоступным
Пример Preloader, который будем реализовывать в этой практической статье, можно посмотреть на видео
Верстаем структуру
По ссылке выше, выбираем наиболее подходящий Preloader и нажимаем на Source
В появившемся окне копируем HTML-структуру Preloader
В разметке создадим блок
Добавляем стили
В том же окне, где копировали HTML-структуру Preloader, копируем CSS-стили для него
Добавляем остальные стили
Пишем логику на JavaScript
Итоги
Конечно, Preloader можно добавлять не только на событие загрузки страницы. Preloader часто добавляют также при AJAX-запросах в отдельных компонентах, не блокируя остальную часть сайта. Но об этом в другой раз 🙂
Буду рад, если статья оказалась полезной
Спасибо за ваше внимание и уделённое время!