Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного gif-изображения, так и в виде шкалы загрузки. Но независимо от внешнего вида прелоадера, принцип его работы будет одним и тем же: как можно раньше показать пользователю индикатор загрузки, а по окончании загрузки этот индикатор скрыть.
Как загружается веб-страница?
Прежде чем создать индикатор какого бы то ни было процесса, нужно разобраться в самом процессе. Загрузка веб-страниц — не исключение. Итак, как же загружается веб-страница?
Браузер отправляет запрос на сервер.
Сервер начинает отправлять браузеру html-код страницы. Специфика передачи данных в интернете такова, что код страницы браузер получает не сразу, а по частям.
В целях экономии времени браузер начинает обработку html-кода страницы, не дожидаясь окончания документа.
Как только в коде страницы браузер встречает внешний ресурс, он отправляет на сервер запрос на получение этого ресурса. При этом, в большинстве случаев, если этот ресурс — javascript-файл, то дальнейшая обработка страницы прекращается до полной загрузки и выполнения javascript-кода этого файла.
Как только браузер полностью получил и обработал html-код страницы (обработчик достиг закрытия тега html), браузер вызывает событие DOMContentLoaded, также известное как DOM Ready.
Как только последний внешний ресурс загружен, браузер вызывает событие window.onload. Страница полностью загружена.
Процесс создания
Теперь, понимая порядок загрузки веб-страницы, можно сформировать для себя список задач и условий для нашего прелоадера. Условия для него таковы:
- Должен отображаться как можно раньше, закрывая собой весь контент.
- По возможности, отображение не должно зависеть от внешних ресурсов.
- Должен скрываться, как только загрузка страницы полностью завершена. Для скрытия можно использовать любую доступную javascript-библиотеку.
Если ваша страница практически не зависит от графики, то вместо window.onload для скрытия прелоадера можно использовать DOM Ready.
Для решения первой задачи поместим следующий html-код сразу после открывающего тега body:
<div id="page-preloader"><span class="spinner"></span></div>
Для нашего прелоадера нам понадобятся стили, но зависить от внешних файлов мы не хотим, поэтому разместим стили прямо в документе, где-нибудь внутри head:
<!-- CSS -->
#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 100500;
}#page-preloader .spinner {
width: 32px;
height: 32px;
position: absolute;
left: 50%;
top: 50%;
background: url('/images/spinner.gif') no-repeat 50% 50%;
margin: -16px 0 0 -16px;
}
К сожалению, полностью отказаться от внешних ресурсов у меня не выйдет, ведь нам нужно анимированное gif-изображение. Но, учитывая небольшой размер самого изображения, это допустимая жертва.
Теперь осталось только скрыть наш прелоадер после загрузки страницы. Здесь мы уже не ограничены в средствах, поэтому можем использовать jQuery:
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
Вот и всё.
Есть и другой вариант, который Вы могли видеть на нашем портале. Он напрямую задействует тег <body> и выглядит немного сложнее. И так, начнём:
Шаг 1. Первое что нам нужно сделать, это установить CSS код
body.royal_loader {
background: none!important;
visibility: hidden!important;
}
#royal_preloader {
visibility: visible;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 9999999999;
-webkit-transition: opacity 0.2s linear 0.8s;
-moz-transition: opacity 0.2s linear 0.8s;
-ms-transition: opacity 0.2s linear 0.8s;
-o-transition: opacity 0.2s linear 0.8s;
transition: opacity 0.2s linear 0.8s;
}#royal_preloader.complete {
opacity: 0;
}#royal_preloader .background {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #fff!important;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}#royal_preloader.number .percentage {
color: #646E7C;
background: transparent;
text-align: center;
margin: -90px 0px 0px -90px;
background-image: url('/loader.gif');
background-size:120px;
background-repeat: no-repeat;
background-position: 100% 0;
padding-top: 100px;
width: 180px;
position: absolute;
font-size: 25px;
top: 45%;
left: 50%;
-webkit-transition: all 0.3s linear 0.5s;
-moz-transition: all 0.3s linear 0.5s;
-ms-transition: all 0.3s linear 0.5s;
-o-transition: all 0.3s linear 0.5s;
transition: all 0.3s linear 0.5s;
}
Шаг 2. Подгрузка <!-- JS -->. Открывать код скрипта смысла нет, так как он достаточно весомый. Можно просто выделить что имеем и разместить в нужном Вам месте.
<script src="http://madeas.ru/js/body.royal_loader.js"></script>
Шаг 3. Заключительный и самый простой этап, прикрепление прелоадера к открывающему тегу <body> таким образом, чтобы выглядел он вот так:
<body class="royal_loader">
Готово! Теперь вместо скачущей в разные стороны верстки посетитель во время загрузки страницы будет видеть наш аккуратный экран загрузки.
ПРОВЕРЕНО!
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят: Похожие материалы не найдены
| Feedback: 0 | |