Прелоадер для сайта

Урок, на котором рассмотрим процесс создания прелоадера для страницы (preload page). В качестве прелоадера будем использовать иконку Font Awesome или анимированное изображение gif, которое будет отображаться во время загрузки страницы.

Как сделать прелоадер для сайта

Страница любого веб-сайта при её открытии не загружается мгновенно. На загрузку и отображение страницы тратиться некоторое время, которое может составлять от 1 до нескольких секунд. Чтобы данный процесс (т.е. процесс загрузки страницы) как-то сгладить для пользователя, ему на это время можно показать анимированное изображение или иконку.

Прелоадер для сайта

Процесс создания прелоадера довольно прост и заключается в том, что нам необходимо показать некоторый блок (#before-load), содержащий анимированное изображение или иконку, сразу после открытия страницы сайта. А после того как загрузка страницы полностью завершиться, этот блок (#before-load) с анимированным изображением gif или иконкой необходимо скрыть от пользователя.

Создание прелоадера для страницы

Разработку прелоадера, который будет выглядеть как белый фон с анимированной иконкой, выполним за 3 шага:

1. Создадим HTML-код, состоящий из блока и иконки Font Awesome. Этот кусок кода необходимо разместить в документе таким образом, чтобы он отобразился пользователю первым, т.е. сразу после открывающего тега body:

<!-- Блок, который будет отображаться над страницей -->
<div id="before-load">
  <!-- Иконка Font Awesome -->
  <i class="fa fa-spinner fa-spin"></i>
</div>

2. Создадим стили CSS для блока div и элемента i (иконки).

#before-load {
  position: fixed; /*фиксированное положение блока*/
  left: 0; /*положение элемента слева*/
  top: 0; /*положение элемента сверху*/
  right: 0; /*положение элемента справа*/
  bottom: 0; /*положение элемента снизу*/
  background: #fff; /*цвет заднего фона блока*/
  z-index: 1001; /*располагаем его над всеми элементами на странице*/
}
#before-load i {
  font-size: 70px; /*размер иконки*/
  position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/
  left: 50%; /*слева 50% от ширины родительского блока*/
  top: 50%; /*сверху 50% от высоты родительского блока*/
  margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/
}
3. Добавим сценарий, скрывающий прелодер после загрузки страницы (т.е. когда произойдёт load у объекта window):
<script>
$(window).load(function() {
  $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');
});
</script>

Демо прелоадера

Если Вы хотите использовать в качестве индикатора прелоадера анимированное изображение gif, то необходимо произвести на вышепредставленных этапах следующие изменения:

В HTML-коде убрать классы Font Awesome:

<!-- Блок, который будет отображаться над страницей -->
<div id="before-load">
  <!-- Элемент, задний фон которого будет использоваться для отображения gif изображения -->
  <i></i>
</div>

В стилях CSS произвести следующие изменения (изменить правило #before-load i {..}):

#before-load i {
    width: 70px; /*ширина gif-изображения*/
    height: 70px; /*высота gif-изображения*/
    position: absolute;
    left: 50%;
    top: 50%;
    background: url('assets/images/img.gif') no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/
    margin: -35px 0 0 -35px;
}

Скачать анимированные gif-изображения для Вашего сайта можно с ресурса http://preloaders.net/ или восвпользоваться этим архивом.

Сайт preloaders.net



   JavaScript и jQuery 0    2826 0

Комментарии (5)

  1. Илья # 0
    Можно про 3й пункт поподробнее… куда его добавлять? ото прелоадер не скрывается
    1. Александр Мальцев # 0
      Вам необходимо на странице найти строчку, в которой подключается библиотека jQuery и после неё расположить этот скрипт.
      <!-- Подключение библиотеки jQuery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <!-- Располагаем после неё скрипт -->
      <script>
      $(window).load(function() {
        $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');
      });
      </script>
      
      1. Илья # 0
        Благодарю за ответ!
        Все работает!
    2. Зограб # 0
      А можно сделать чтобы он назад всплывал, при нажатии на кнопку например?
      1. Петр # 0
        А как сделать чтобы загрузка работала только в определенном блоке

        <div class="container">
        <!-- В этом контейнере каталог товаров -->
        </div>
        
        Заранее спасибо

        Вы должны авторизоваться, чтобы оставлять комментарии.