Показать Preloader при ожидании запроса в более 500 мс
Думаю, в beforeSend нужно показывать индикатор загрузки, внутри setTimeout . Но что если наступит событие success с командой скрытия индикатора, а затем закончится timeout и индикатор покажется, когда уже не нужен? Прелоадер нужно показывать при загрузке, дольше определённого времени и скрывать, когда пришёл ответ. Кроме того, нужно учитывать, что возможен повторный клик и запуск запроса, также он может быть не успешен. Очевидно что во всех этих случаях timeout должен очиститься и начинаться заново при последнем запросе. Можете ли подсказать алгоритм или пример кода? Или, возможно, есть что то готовое для такого продвинутого вывода индикатора?
Отслеживать
3,847 3 3 золотых знака 19 19 серебряных знаков 36 36 бронзовых знаков
Как отобразить gif пока идет запрос
Здесь могла бы быть ваша реклама
Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel
Помог: 3 раз(а)
Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.
Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо
После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..
Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.
Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.
На последок как оно происходит на форумах
Цитата:
Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.
Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12
Как сделать воспроизведение GIF по клику — ускоряем загрузку сайта путем загрузки GIF при клике
Так как статья относится именно к GIF изображениям, то рекомендую изучить статью по созданию GIF онлайн:
Примеров до и после не будет, так как здесь все понятно будет на цифрах. А ниже вы можете посмотреть и скачать готовый пример загрузки GIF изображения при клике:
СМОТРЕТЬ ДЕМОСКАЧАТЬ ДЕМО
Плюсы и минусы загрузки GIF при клике
Чтобы наглядно оценить все «за» и «против» данного способа я представил все наглядно в таблице:
| Критерий | Обычная вставка GIF | Загрузка GIF по клику |
|---|---|---|
| 1. Необходимость подключения jQuery | нет | да |
| 2. Необходимость дополнительного JS функционала | нет | да |
| 3. Необходимость дополнительных телодвижений (создание preview изображения) | нет | да |
| 4. Увеличение скорости загрузки в 10-и раз | нет | да |
Первый пункт немного спорный, потому что можно ведь было написать скрипт на чистом Javascript, тогда он бы отсутствовал, но вот остальные точно останутся в любом случае.
Пока что не до конца понятно в чем же тогда смысл данного способа, если же у него столько минусов. Но вот последний плюс для многих (и для меня в том числе) будет намного важнее всех минусов, которые указаны выше. Чтобы добиться хорошей скорости загрузки — необходимо кое-что сделать.
Сейчас хочу немного поговорить о последнем способе загрузки и показать на цифрах как сильно отличаются загружаемые объемы данных при простой вставке GIF, а также во втором случае. Я приведу на примерах тех GIF изображений, которые вы можете увидеть в демо .
| Критерий | Обычная вставка GIF | Загрузка GIF по клику |
|---|---|---|
| Объем всех загружаемых браузером файлов в первый раз | 8413,95 Kb | 185,69 Kb |
Конкретно в данном примере отличия колоссальные!
Что нужно сделать до начала внедрения кода…
Допустим, вас воодушевил данный способ и вы понимаете, что на вашем сайте находится большое количество GIF изображений, а вот скорость загрузки страдает. И вы решили внедрить данный функционал у себя на проекте (возможно будущем). Есть небольшая предварительная процедура, при которой нужно подготовить preview изображения, которые необходимо показывать как только загрузился сайт. То есть это именно те изображения, которые пользователь видит пока не кликнул на кнопку Play.
Что можно поставить на preview изображение? Здесь есть 2 варианта: либо делать для каждого GIF изображения свое preview, которое является его первым кадром, либо сделать одно изображение, которое будет использоваться на всем сайте, вне зависимости от GIF изображения. Но, решить как будет лучше для вашего проекта, вам необходимо самостоятельно.
Итак, вы подготовили все preview изображения для каждого GIF изображения и сейчас готовы внедрить функционал, тогда переходим к самому интересному блоку! ��
Блок «СКОПИРОВАЛ-ВСТАВИЛ»
Здесь все будет действительно просто, а если нет, тогда просто скачайте демо пример и посмотрите как все устроено внутри и сделайте соответствующие действия для своего проекта.
Начнем, как обычно, с разметки:
1 этап. HTML разметка
1 2 3
div class="gif-with-play"> img src="img/self-portrait.jpg" alt="Self Portrait" data-srcgif="img/self-portrait.gif"> /div>
ВАЖНО: все изображения должны находиться в блоке с классом » gif-with-play «. И второе важное замечание: необходимо указать адрес до preview изображения в атрибуте » src » и ОБЯЗАТЕЛЬНО указать адрес до GIF изображения в атрибуте » data-alt «.
Здесь все! Идем дальше…
2 этап. CSS стили
На самом деле можно обойтись и без CSS стилей, а внедрить функционал и все. Но ведь человек вряд ли поймет, что можно кликнуть на изображение и просто проскроллит страницу далее. Поэтому все же нужны стили, которые помогут пользователю понять как работать с этим компонентом страницы:
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
.gif-with-play { position: relative; background: url('../img/loading.gif') transparent no-repeat center center; } .gif-with-play:hover { cursor: pointer; } .gif-with-play:hover:before { background-color: rgba(255,255,255,.56); } .gif-with-play:after, .play.gif-with-play:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 120px; width: 120px; -webkit-background-size: cover; background-size: cover; z-index: 10; -webkit-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; opacity: 1; } .gif-with-play:after { background-image: url('../img/player-buttons/play_button.svg'); } .play.gif-with-play:after{ background-image: url('../img/player-buttons/stop_button.svg'); } .play.gif-with-play:not(:hover):after { opacity: .35; } .gif-with-play:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(255,255,255,.7); z-index: 10; -webkit-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; opacity: 1; } .play.gif-with-play:before { background-color: rgba(255,255,255,0); } .gif-with-play img { opacity: 1; -webkit-transition: all .35s ease; -o-transition: all .35s ease; transition: all .35s ease; } .gif-with-play.loading-hide img { opacity: 0; } .loading-hide.gif-with-play:after, .loading-hide.play.gif-with-play:after{ opacity: 0; } @media screen and (max-width: 768px) .gif-with-play:after, .play.gif-with-play:after { height: 60px; width: 60px; } }
Это самый базовый набор стилей, чтобы показать кнопку Play. Я их написал только для того, чтобы вы понимали принцип и смогли изменить кнопку (да и любые стили) под себя и свой проект. Если вы заметили, то для GIF изображения, которое будет подставлено с помощью JS вместо preview, блоку-контейнеру (в нашем случае блоку с классом «gif-with-play») добавляется класс » play «.
Кто-то скажет, что можно было добавить дополнительные теги в HTML разметку и к ним привязать событие воспроизведения и остановки GIF. Но я мне нравится формат с псевдоэлементами :before и :after .
3 этап. Javascript
Первым делом необходимо подключить библиотеку jQuery . А затем расположить ниже следующий скрипт:
JAVASCRIPT КОД
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
(function($) { $('.gif-with-play').on('click', function() { var $this = $(this), $img = $this.children('img'), $imgSrc = $img.attr('src'), $imgSrcgif = $img.attr('data-srcgif'), $imgExt = $imgSrcgif.split('.'); if($imgExt[1] === 'gif') { $this.addClass('loading-hide'); $img.attr('src', $img.data('srcgif')).attr('data-srcgif', $imgSrc); $($img).load(function(){ $this.removeClass('loading-hide'); }); } else { $img.attr('src', $imgSrcgif).attr('data-srcgif', $img.data('srcgif')); } $this.toggleClass('play'); }); })(jQuery);
Для владельцев WordPress
Для вас есть отличное готовое решение в виде плагина для WordPress. Плагин называется «WP GIF Player». Скачать его можно здесь — скачать плагин «WP GIF Player».
Основные преимущества и возможности плагина «WP GIF Player»:
- «Проигрывание» одновременно только одно изображение GIF
- Автоматическое создание изображений для превью GIF (выше нам необходимо было это делать самостоятельно)
- GIF изображения добавляются очень легко, с помощью одной кнопки
- Есть возможность параллельной загрузки GIF изображений
- Можно выставить ограничение на максимальное разрешение GIF изображения
Для владельцев WordPress это хорошее решение, потому что постоянно проделывать все действия вручную может занять очень много времени, а свой плагин писать — это не каждому под силу.
Вывод
Сейчас GIF изображения — это отличный способ объяснить самый важный момент. Также многие документации делаются с помощью GIF изображений, так как можно наглядно показать использование какого-либо инструмента локально или с помощью горячих клавиш.
Также в социальных сетях сейчас они набрали популярность, потому что загрузку видео ждать долго, а вот GIF загружается куда быстрее.
Но данный способ тяжело применить на больших объемах, когда вы используете практически на каждой странице, потому что придется доработать этот способ, чтобы сервер сам генерировал preview изображение из GIF.
Как сделать прелоадер для сайта и спиннер для кнопки?
Страница любого сайта или веб-приложения не загружается мгновенно . На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер . А после того, как страница полностью загрузится его убрать . Основная цель прелоадера — это улучшить впечатление пользователя о сайте.
Как создать прелоадер страницы
На самом деле создать прелоадер очень просто.
Для этого нужно сразу после открывающего тега body добавить код (HTML структуру прелоадера). С помощью CSS его необходимо настроить так, чтобы он занимал всю область viewport и находился над содержимым страницы. В качестве прелодера обычно используют анимированную картинку (svg, gif), или CSS-анимацию.
В процессе загрузки страницы её контент находится под прелодером. Пользователь видит только анимированную картинку.
После полной загрузки прелоадер необходимо скрыть. Чтобы это осуществить необходимо написать очень маленький скрипт. Это можно выполнить как на чистом JavaScript, так и с использованием библиотеки jQuery .
Прелоадер на чистом CSS
Этапы создания прелодера на чистом CSS:
1. Добавить после открывающего тега body следующий HTML-код:
Элемент .preloader – это контейнер, который будет занимать всю область просмотра и находится над содержимым страницы. .preloader__row и .preloader__item – необходимы для создания CSS-анимации, которую отобразим в центре viewport.
2. Создать следующие стили:
.preloader { /*фиксированное позиционирование*/ position: fixed; /* координаты положения */ left: 0; top: 0; right: 0; bottom: 0; /* фоновый цвет элемента */ background: #e0e0e0; /* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */ z-index: 1001; } .preloader__row { position: relative; top: 50%; left: 50%; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; text-align: center; animation: preloader-rotate 2s infinite linear; } .preloader__item { position: absolute; display: inline-block; top: 0; background-color: #337ab7; border-radius: 100%; width: 35px; height: 35px; animation: preloader-bounce 2s infinite ease-in-out; } .preloader__item:last-child { top: auto; bottom: 0; animation-delay: -1s; } @keyframes preloader-rotate { 100% { transform: rotate(360deg); } } @keyframes preloader-bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; }Размещение прелоадера над контентом осуществляется посредством задания ему фиксированного позиционирования и CSS-свойства z-index .
3. Вставить сценарий, который будет добавлять к элементу body класс loaded после полной загрузки страницы:
Этот скрипт очень резко скрывает прелоадер. Чтобы этот процесс улучшить, а именно выполнить это с анимацией можно использовать вместо вышеприведённого сценария этот:
Прелоадер в виде анимированной svg иконки
Процесс создания прелоадера в виде анимированной svg иконки не будет сильно отличаться от примера с использованием CSS-анимации.
1. Создадим HTML-разметку прелоадера и разместим её сразу же после открывающего тега body :
В качестве svg можно использовать любое другое изображение.
.preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; /* фоновый цвет */ background: #e0e0e0; z-index: 1001; } .preloader__image { position: relative; top: 50%; left: 50%; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; text-align: center; animation: preloader-rotate 2s infinite linear; } @keyframes preloader-rotate { 100% { transform: rotate(360deg); } } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; }3. Поместим на страницу следующий сценарий:
Этот сценарий на чистом JavaScript. Но его можно написать с использованием библиотеки jQuery.
В этом случае он будет выглядеть следующим образом:
Пример прелоадера с градиентным фоном:
Прелоадер с использованием анимированной gif картинки
В качестве изображения можно использовать не только svg, но и gif картинку.
CSS для прелоадера:
.preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; z-index: 1001; } .preloader__image { position: relative; top: 50%; left: 50%; width: 64px; height: 64px; margin-top: -32px; margin-left: -32px; background: url('preloader.gif') no-repeat 50% 50%; /*расположение (url) изображения gif и др. параметры*/ } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; }Небольшая коллекция анимированных gif-изображений имеется в этом архиве.
Вариант прелоадера с использованием jQuery функции fadeOut
Пример скрипта нв jQuery для скрытия прелоадере с использованием функции fadeOut:
JavaScript
$(window).on('load', function() { $('.preloader').fadeOut().end().delay(400).fadeOut('slow'); });Кнопка отправки со спиннером
Рассмотрим создание формы, работающей через AJAX. При её отправке будем переводить кнопку type=»submit» в состояние disabled и показывать спиннер. Спиннер будем отображать до тех пор пока не прийдет ответ от сервера. Тем самым спиннер будет указывать что действие все ещё выполняется и оно не завершено.
1. Отправка формы с использованием XMLHttpRequest:
2. Отправка формы с использованием Fetch:
JavaScript
async function sendForm() { try { document.forms.user.querySelector('[type="submit"]').disabled = true; document.forms.user.querySelector('.submit-spinner').classList.remove('submit-spinner_hide'); let response = await fetch(document.forms.user.action, { method: 'post', body: new FormData(document.forms.user) }); document.forms.user.querySelector('[type="submit"]').disabled = false; document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide'); if (response.ok) { let result = await response.json(); } } catch (error) { document.forms.user.querySelector('[type="submit"]').disabled = false; document.forms.user.querySelector('.submit-spinner').classList.add('submit-spinner_hide'); console.log(error); } } // при отправке формы document.forms.user.addEventListener('submit', (e) => { e.preventDefault(); sendForm(); });