Оглавление

Я уже описывал процесс создания прелоадера на jQuery, в этой статье, я покажу вам как создать прелоадер на JavaScript, применив минимум jQuery.

Разметка

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

<div id="preloader">
  разметка из статьи про прелоадер
</div>

<div class="content">
  <h1>Заголовок сайта</h1>
  Контент сайта.
</div>

Стилизация

Точно так же забираем из статьи выше все стили и добавляем парочку новых:

/* Главная обертка, которая будет скрывать контент до полной загрузки страницы  */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 99999;
}

/* Ну и немного стилизуем контент */
.content {
  text-align: center;
  font-size: 20px;
}

Скрипт

Готовый скрипт прелоадера будет выглядеть так:

/* Fadeout function */
function preloader(element, delay) {
    this.close = function (callback) {
        setTimeout(function () {
            $(element).fadeOut(400, function () {
                if (callback !== undefined) callback();
            });
        }, delay);
    };
}

/* Set preloader function var */
var loader = new preloader('#preloader', 200);

/* Close loader when window load */
$(window).on('load', function () {
    loader.close();
});

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

Далее прописываем логику скрытия, коллбэком вызываем функцию и убираем прелоадер за 400 миллисекунд. Это время отвечает за эффект скрытия, укажите там, например 20000 и вы увидите этот эффект наглядно.

Далее мы объявили функцию, занесли её в переменную и вызвали функцию скрытия. Как только все элементы прогрузились, скрываем прелоадер. Наша главная функция, отрабатывает как нужно.

Результат

Смотреть пример Preloader для сайта на JavaScript от webinmind.ru (@webinmind).