Прелоадер, его создание и варианты оформления

Прелоадер — это заглушка (анимационный или другой эффект), которая показывается прежде чем полностью загрузится страница сайта

В этой статье рассмотрим как его сделать, установить, оформить и самое главное, когда его нужно использовать, а когда нет.

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

  • Cайт не должен так долго грузится, и соотв. показывать загрузку на 1 секунду нет никакого смысла.
  • Cайт может грузиться и минуту, если какие-то сторонние ресурсы (метрика, аналитика, различные апи) не отвечают, и соотв. пользователь не дождется окончания и уйдет.

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

Но и тут не стоит забывать, что если вы грузите что то с другого сайта, который недоступен, прелоадер может висеть минутами.

Создавая прелоадер нужно помнить, что красивый анимационный эффект может весить очень много, и в итоге посетитель сайта будет ждать пока загрузится он, а потом еще ждать когда вместо него покажется нужная ему информация.

Создание прелоадера:

Создается и работает все просто: мы создаем фиксированный слой на весь экран, на нем размещаем картинку или блок анимации, а после полной загрузки страницы все это убираем.

HTML:

CSS:

JS:

jQuery:

Класс preloader-remove отвечает за удаление прелоадера. Его можно удалить, сдвинуть или сделать прозрачным, как в примере.

Можно использовать и альтернативный вариант, это закрывать не всю страницу сайта, а нужную область, например слайдер или галерею. Этот вариант рассмотрим позже.

Варианты оформления:

В центр страницы можно поместить обычную gif-картинку, но это не интересно, поэтому рассмотрим другие варианты:

Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

Вариант 6

Вариант 7

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • root:

    Как Можно использовать и альтернативный вариант, это закрывать не всю страницу сайта, а нужную область, например слайдер или галерею. как сделать?

    Ответить
    • Alexander:

      Сейчас контейнер прелоадера .preloader зафиксирован и перекрывает всю страницу, но им можно перекрыть любой другой блок, секцию или элемент.

      Ответить
      • root:

        Можете сделать пример если не сложно?

        Ответить
        • Alexander:

          Вот например (пример 1)
          Там полупрозрачный слой

          <div class="text-lay"></div> 

          перекрывает картинку. Точно также можно использовать прелоадер, только соотв. не прозрачный.
          Слой перекрывает картинку или другой элемент, а после загрузки страницы он пропадает.

          А вообще, куда вы это хотите приспособить?
          Может просто путаете прелоадер с ленивой загрузкой или аяксом? (в них тоже иногда крутится иконка при загрузке)

          Ответить
          • root:

            Спасибо) возможно я не так преподношу) но вот есть допустим слайдер, при обновлении страницы идет загрузка а потом открывается слайдер. Или допустим товар на сайте, у всего блока идет загрузка потом показ блока.

            Ответить
            • Alexander:

              Завтра сделаю статейку для элементов, чтобы наглядно было

              Ответить
              • root:

                Спасибо) огромное. Буду ждать)

              • Alexander:

                Напишите в ВК мне или на почту.
                Я так подумал, такой прелоадер не лучший вариант для того что вы хотите.

  • Сергей:

    Столкнулся с проблемой. js код на для jquery на декстопе работает отлично. А в мобильном-яндекс браузере прелодер не отключается. Чистый js работает хорошо.

    Ответить
    • Alexander:

      Такой прелоадер лучше вообще отключать через заданный промежуток времени.
      На всякий случай, например, если что то загрузиться не может очень долго.
      Этот код уберет его через 2 секунды.

      window.setTimeout(function() {
      	document.querySelector('.preloader').classList.add("preloader-remove");
      }, 2000);	
      Ответить