Мобильный логотип Томатус
+7 (495) 181 01 44
Оставить заявку
Вадим Фомин

6 Марта 2013, Вадим Фомин

Прелоадер сайта своими руками

Начало

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

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

Как загружается веб-страница

Прежде чем создать индикатор какого бы то ни было процесса, нужно разобраться в самом процессе. Загрузка веб-страниц — не исключение. Итак, как же загружается веб-страница?

  1. Браузер отправляет запрос на сервер.
  2. Сервер начинает отправлять браузеру html-код страницы. Специфика передачи данных в интернете такова, что код страницы браузер получает не сразу, а по частям.
  3. В целях экономии времени браузер начинает обработку html-кода страницы, не дожидаясь окончания документа.
  4. Как только в коде страницы браузер встречает внешний ресурс, он отправляет на сервер запрос на получение этого ресурса. При этом, в большинстве случаев, если этот ресурс — javascript-файл, то дальнейшая обработка страницы прекращается до полной загрузки и выполнения javascript-кода этого файла.
  5. Как только браузер полностью получил и обработал html-код страницы (обработчик достиг закрытия тега html), браузер вызывает событие DOMContentLoaded, также известное как DOM Ready.
  6. Как только последний внешний ресурс загружен, браузер вызывает событие BX.ajax.onload_363815. Страница полностью загружена.
Порядок загрузки веб-страницы наглядноПорядок загрузки веб-страницы наглядно

Процесс создания

Теперь, понимая порядок загрузки веб-страницы, можно сформировать для себя список задач и условий для нашего прелоадера. Мои условия для него таковы:

  • Должен отображаться как можно раньше, закрывая собой весь контент.
  • По возможности, отображение не должно зависеть от внешних ресурсов.
  • Должен скрываться, как только загрузка страницы полностью завершена. Для скрытия можно использовать любую доступную javascript-библиотеку.

Если ваша страница практически не зависит от графики, то вместо BX.ajax.onload_363815 для скрытия прелоадера можно использовать DOM Ready.

Для решения первой задачи поместим следующий html-код сразу после открывающего тега body:

<div id="page-preloader"><span class="spinner"></span></div>

Для нашего прелоадера нам понадобятся стили, но зависить от внешних файлов мы не хотим, поэтому разместим стили прямо в документе, где-нибудь внутри head:

#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'); });

Готово! Теперь вместо скачущей в разные стороны верстки посетитель во время загрузки страницы будет видеть наш аккуратный экран загрузки.


Вернуться ко всем статьям