Прелоадер на jQuery
jQuery

Прелоадер на jQuery

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

Существует огромное количество сервисов, позволяющих загрузить GIF- или SVG-прелоадер. Однако в любом случае, при отправке запроса нужно добавлять прелоадер в структуру страницы, а после его выполнения — удалять. Делать это вручную при каждом запросе неудобно. В статье мы рассмотрим, как сделать процесс добавления/удаления прелоадера более удобным с помощью простого jQuery-плагина.

Заготовка плагина

Работа плагина будет выглядеть, как показано на картинке:

Плагин должен работать следующим образом: для добавления прелоадера в контейнер будем вызывать метод:


$('#container').preloader('start');

Соответственно, чтобы удалить прелоадер, необходимо будет вызвать:

$(‘#container’).preloader(‘stop’);

Создадим заготовку плагина jQuery:


(function($) {
    $.fn.preloader = function(action) {
        return this;
    };
}(jQuery));

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

Функции включения/выключения прелоадера

Напишем функцию start:


var actions = {
    start: function() {
        var $preloader = $("<div id='jpreloader' class='preloader-overlay'><div class='loader' style='position:absolute;left:50%;top:50%;margin-left:-24px;margin-top:-24px;'><svg width='48px' height='48px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-default'>...</svg></div></div>");
        $preloader.css({
            'background-color': '#4c4c4c',
            'width': '100%',
            'height': '100%',
            'left': '0',
            'top': '0',
            'opacity': '0.3',
            'z-index': '100000',
            'position': 'absolute'
        });
        this.append($preloader);
    }
};

Объект actions будет содержать доступные функции-действия. В функции start мы создает новый jQuery-объект, содержащий прелоадер, задаем для него необходимые стили и добавляем в контейнер. Сам прелоадер представляет собой блок <div>, абсолютно спозиционированный отновительно контейнера и растянутый на всю ширину и высоту контейнера. Мы задаем ему заведомо большое значение z-index, чтобы он перекрыл содержимое контейнера, а также значение opacity равное 0.3.

Обратите внимание на то, что контейнер должен иметь свойство position отличное от static для того, чтобы прелоадер корректно спозиционировался.

Внутри тегов <svg>...</svg> в прелоадере располагается содержимое анимированного svg-прелоадера. Я не привожу его код, поскольку в интернете можно найти огромное количество SVG-прелоадеров по вашему усмотрению. Достаточно скачать понравившийся прелоадер, открыть с помощью любого текстового редактора и добавить содержимое в плагин вместо тегов <svg></svg>.

Теперь добавим функцию stop, которая будет удалять прелоадер:


stop: function() {
    this.find('.preloader-overlay').remove();
}

Здесь все предельно просто: мы ищем внутри контейнера элементы с классом preloader-overlay и удаляем.

Вызов соответствующей функции

Теперь, в зависимости от значения action, необходимо вызвать нужную функцию. Для этого воспользуемся функцией apply.


$.fn.preloader = function(action) {
    if (actions[action] && typeof actions[action] === 'function') {
        actions[action].apply(this);
    }
    return this;
};

Мы проверяем, есть ли для переданного параметра соответствие в объекте actions и вызываем нужную функцию.

Рассмотрим полный код плагина:


(function($) {
    var actions = {
        start: function() {
            var $preloader = $("<div id='jpreloader' class='preloader-overlay'><div class='loader' style='position:absolute;left:50%;top:50%;margin-left:-24px;margin-top:-24px;'><svg width='48px' height='48px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-default'>...</svg></div></div>");
            $preloader.css({
                'background-color': '#4c4c4c',
                'width': '100%',
                'height': '100%',
                'left': '0',
                'top': '0',
                'opacity': '0.3',
                'z-index': '100',
                'position': 'absolute'
            });
            this.append($preloader);
        },

        stop: function() {
            this.find('.preloader-overlay').remove();
        }
    };
    
    $.fn.preloader = function(action) {        
        actions[action].apply(this);
        return this;
    };
}(jQuery));

Использование плагина

Использовать плагин крайне просто. Рассмотрим пример: допустим у нас есть некоторая форма, которая отправляется на сервер с помощью AJAX-запроса.


var form = $('#test_form');
form.preloader('start');
$.post('/backend/', form.serialize())
.done(function() { /*...*/ })
.fail(function() { /*...*/ })
.always(function() {
    form.preloader('stop');
});

Здесь мы включаем прелоадер и отправляем запрос. В обработчиках done и fail делаем что-то, что соответствует успешному или неуспешному выполнению запроса соответственно, а в обработчике always (который выполняется всегда вне зависимости от статуса ответа) удаляем прелоадер.

Заключение

В плагине мы использовали SVG-прелоадер — это удобно, т.е. не требует дополнительных картинок или стилей CSS. Но, если вам не нравится SVG, можно использовать старую добрую GIF-картинку. При этом картинку можно хранить непосредственно рядом с кодом плагина и вызывать так же с одним параметром или добавить дополнтельный параметр, в котором будет перелаваться путь к изображению.

Также можно использовать CSS-анимацию. Здесь можно обратить внимание на библиотеку loaders.css , опубликованную на github Коннором Атертоном. На демо-странице показаны несколько видов прелоадеров, созданые исключетельно с помощью CSS-анимации.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться