Одна из типичных задач для улучшения пользовательского интерфейса на сайтах — это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай — это обновление части шаблона, используя ajax. В конце рассмотрим дополнительно менее распространенный случай — визуализацию в контейнере при ожидании загрузки картинки браузером.
Детализируя задачу, рассмотрим набор элементов, с которым приходится взаимодействовать.
У нас есть набор из двух HTML контейнеров: div.button — это кнопка, при нажатии на которую производиться обновление содержимого контейнера div#view.
|
1 2 |
<div class="button" onclick="ajax_func();">...</div> <div id="view">...</div> |
При нажатии на кнопку происходит ajax запрос. В этом примере я использую jQuery.ajax(). Данные в моём примере возвращаются, упакованные json. Я возвращаю с сервера массив из двух элементов, запрашивая некоторый адрес /ajax-request. Первый элемент [0] содержит HTML код — результат работы, а второй [1] — логический код состояния, где ‘OK’ — означает успешное выполнение.
Это помогает реализовать более сложные схемы с передачей и анализом параметров, а также возвратом состояния обработки этих параметров.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery.ajax('/ajax-request/' + ...) .done(function(data) { var a = eval(data); if (a[1] == 'OK') { jQuery('#view').html(a[0]); } else { alert('Какая то логическая ошибка!'); } }) //если возникает ошибка при запросе .fail(function() { alert( 'Какая то техническая ошибка!' ); }); |
Ближе к сути
Длинное вступление позволяет более предметно продолжить разговор.
Что должно происходить после нажатия на клавишу? Пока идет загрузка контента пользователь должен видеть анимацию ожидания. Когда данные получены, анимация должна прекратиться. Я предлагаю рассмотреть вариант, когда в начале мы имеем кнопку, оформленную картинкой, которая выглядит, например, вот так:
Эти две стрелки легко анимировать, придав им вращение. Для этого опишем дополнительный CSS класс для состояния «ожидание загрузки».
|
1 2 3 4 5 6 7 |
.button.loading { animation: .6s linear 0s normal none infinite running rotate-animation; } @keyframes rotate-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
Мы поворачиваем фоновую картинку кнопки линейно.
А javascript код потребует добавлять и убирать класс .loading для контейнера кнопки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> function ajax_func() { //подключаем анимацию jQuery('.button').addClass('loading'); jQuery.ajax('/ajax-request/' + ...) .done(function(data) { //отключаем анимацию jQuery('.button').removeClass('loading'); var a = eval(data); ... }) //если возникает ошибка при запросе .fail(function() { //отключаем анимацию jQuery('.button').removeClass('loading'); ... }); } </script> |
Визуализация ожидания загрузки картинки браузером
Как и обещал, делюсь небольшой идеей на сей счет. Когда сайт должен показать в первый раз много картинок, что типично при загрузке ветки каталога с картинками товара, или изображений в портфолио, то загрузка картинок может, что называется, запаздывать. Выглядит это не очень красиво. Что можно сделать, не прибегая к каким то экзотическим методам?
Самая простая идея — выложить по центру картинки в виде фона анимацию загрузки.
CSS можно использовать следующий:
|
1 2 3 |
img { background: transparent url("loading-animation.gif") no-repeat scroll center center; } |
Идея простая, а реализация ещё проще. Никаких скриптов, pure CSS. :)
очень годная статейка! я еще на просторах интернета нашел блог https://shneider-host.ru/blog/animaciya-zagruzki-stranicy-v-drupal-7.html, тут тоже довольно неплохо объясняют только другим способом, хоть в коде рыться так не надо))