Подгрузка данных с сервера (например, при изменении параметров фильтра) происходит с небольшой задержкой, потому пользователь может не понять, среагировал как то сайт или нет на его действия.
Задача состоит в том, чтобы показать, что идет загрузка данных.
Для этого нужно зацепиться за два js события: начало отправка ajax запроса — ajaxSend и завершение запроса — ajaxComplete.
В следующем примере я добавляю (а по завершению загрузки убираю) CSS класс isLoading к контейнеру представления (view), которая называется all_products_and_filter. При этом код одинаково работает как для Drupal 7, так и Drupal 9:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
(function ($) { /** * content loading animation */ $(document) .unbind('ajaxSend.loadingPopup') .bind("ajaxSend.loadingPopup", function( ev, jqXHR, ajaxOptions) { let view_name = ''; try { // извлекаем из дополнительных данных имя представления // убеждаемся, что был выполнен именно views/ajax view_name = ajaxOptions.extraData.view_name; if (ajaxOptions.url.indexOf('/views/ajax') == -1 || view_name != 'all_products_and_filter') { return; } // добавляем CSS class к контейнеру view $('.view-all-products-and-filter').addClass('isLoading'); } catch (err) { ; } }) .unbind('ajaxComplete.loadingPopup') .bind("ajaxComplete.loadingPopup", function( ev, jqXHR, ajaxOptions) { let view_name = ''; try { view_name = ajaxOptions.extraData.view_name; if (ajaxOptions.url.indexOf('/views/ajax') == -1 || view_name != 'all_products_and_filter') { return; } // убираем CSS class $('.view-all-products-and-filter').removeClass('isLoading'); } catch (err) { ; } }); })(jQuery); |
Остаётся только добавить стили .isLoading , чтобы пользователь увидел изменения на front-end. Чтобы вам было с чего начать, поделюсь своем шаблоном стилей (SASS):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.isLoading { > :before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; // затемнение и показ какой то анимированной // картинки где то в верхней области контейнера background: rgba(0,0,0,0.1) url(АНИМИРОВАННАЯ КАРТИНКА ОЖИДАНИЯ ЗАГРУЗКИ.gif) center top 50px no-repeat; } } |