Я хотел бы разместить анимацию вращающегося круга "Пожалуйста, подождите, загружается" на моем сайте. Как мне сделать это с помощью jQuery?
585
Вы могли бы сделать это различными способами. Это может быть небольшой статус на странице с надписью «Идет загрузка ...», или громкий звук, когда весь элемент скрывает страницу во время загрузки новых данных. Подход, который я использую ниже, покажет вам, как выполнить оба метода.
Давайте начнем с получения хорошей анимации «загрузки» с http://ajaxload.info, которую
я буду использовать
Давайте создадим элемент, который мы можем показать / скрыть каждый раз, когда делаем запрос ajax:
<div class="modal"><!-- Place at bottom of page --></div>Дальше давайте добавим немного чутья:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}Хорошо, на JQuery. Следующая часть на самом деле очень проста:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});Это оно! Мы присоединяем некоторые события к элементу body каждый раз, когда запускаются события ajaxStartили ajaxStop. Когда начинается событие ajax, мы добавляем класс «loading» в тело. и когда события завершаются, мы удаляем класс «загрузки» из тела.
Смотрите это в действии: http://jsfiddle.net/VpDUG/4952/
.ajaxStop()и.ajaxStart()метод должен быть прикреплен только к документу. документыЧто касается фактической загрузки изображения, проверьте этот сайт для нескольких вариантов.
Что касается отображения DIV с этим изображением в начале запроса, у вас есть несколько вариантов:
А) Вручную показать и скрыть изображение:
Б) Используйте ajaxStart и ajaxComplete :
Используя этот элемент будет отображаться / скрываться для любого запроса. Может быть хорошо или плохо, в зависимости от необходимости.
C) Используйте отдельные обратные вызовы для конкретного запроса:
источник
Наряду с тем, что предложили Джонатан и Самир (между прочим, оба отличных ответа!), В jQuery есть несколько встроенных событий, которые будут срабатывать для вас при выполнении запроса ajax.
Там
ajaxStartсобытие... и это брат,
ajaxStopсобытиеВместе они создают прекрасный способ показать сообщение о прогрессе, когда где-либо на странице происходит какое-либо действие ajax.
HTML:
Автор сценария:
источник
.ajaxStartможет быть прикреплено только к документу, т.е.$(document).ajaxStart(function(){}).Вы можете получить анимированный GIF вращающегося круга из Ajaxload - вставьте его где-нибудь в иерархию файлов вашего сайта. Затем вам просто нужно добавить элемент HTML с правильным кодом и удалить его, когда вы закончите. Это довольно просто:
Затем вам просто нужно использовать эти методы в вашем вызове AJAX:
Это имеет несколько предостережений: во-первых, если у вас есть два или более мест, где может быть показано загрузочное изображение, вам нужно будет как-то отслеживать, сколько вызовов выполняется одновременно, и скрывать только тогда, когда они все сделано. Это можно сделать с помощью простого счетчика, который должен работать практически во всех случаях.
Во-вторых, это будет скрывать загрузочный образ только при успешном вызове AJAX. Для обработки состояния ошибки, вы должны смотреть на
$.ajax, который является более сложным , чем$.load,$.getи тому подобное, но гораздо более гибким тоже.источник
showLoadingImageдо начала иhideLoadingImageпосле окончания. Должно быть довольно просто. Возможно, вам понадобится сделать какой-тоsetTimeoutвызов, чтобы убедиться, что браузер действительно отображает новый<img>тег - я видел пару случаев, когда он не беспокоился до тех пор, пока JavaScript не завершил выполнение.Отличное решение Джонатона ломается в IE8 (анимация вообще не отображается). Чтобы это исправить, измените CSS на:
источник
jQuery обеспечивает перехват событий, когда AJAX-запросы начинаются и заканчиваются. Вы можете подключиться к ним, чтобы показать свой загрузчик.
Например, создайте следующий div:
Установите это
display: noneв ваших таблицах стилей. Вы можете стилизовать его так, как хотите. Вы можете создать красивое изображение загрузки на Ajaxload.info , если хотите.Затем вы можете использовать что-то вроде следующего, чтобы оно автоматически отображалось при отправке Ajax-запросов:
Просто добавьте этот блок Javascript в конец вашей страницы, прежде чем закрывать тег body или где угодно.
Теперь, когда вы отправляете Ajax-запросы,
#spinnerdiv будет отображаться. Когда запрос будет выполнен, он снова будет скрыт.источник
Если вы используете Turbolinks с Rails, это мое решение:
Это CoffeeScript
Это SASS CSS, основанный на первом отличном ответе Джонатана Сэмпсона
источник
Как сказал Марк Х, блок UI - это путь.
Напр .:
Obs .: Я получил ajax-loader.gif на http://www.ajaxload.info/
источник
При всем уважении к другим постам у вас есть очень простое решение, использующее CSS3 и jQuery, без использования каких-либо внешних ресурсов или файлов.
источник
Это заставит кнопки исчезнуть, а затем на их месте появится анимация «загрузки» и, наконец, просто отобразится сообщение об успехе.
источник
Большинство решений, которые я видел, ожидают, что мы создадим оверлей загрузки, оставим его скрытым, а затем при необходимости отобразим его, или покажем изображение или изображение и т. Д.
Я хотел разработать надежный плагин, в котором с помощью простого вызова jQuery я могу отобразить экран загрузки и разорвать его, когда задача будет выполнена.
Ниже приведен код. Это зависит от Font awesome и jQuery:
Просто поместите вышеперечисленное в файл js и включите его в проект.
CSS дополнение:
Призвание:
источник
Обратите внимание, что при использовании ASP.Net MVC с
using (Ajax.BeginForm(...помощьюajaxStartне будет работать.Используйте
AjaxOptionsдля преодоления этой проблемы:источник
По https://www.w3schools.com/howto/howto_css_loader.asp , это двухэтапный процесс без JS:
1. Добавьте этот HTML-код туда, где вы хотите получить спиннер:
<div class="loader"></div>2. Добавьте этот CSS, чтобы сделать фактический счетчик:
источник
$("#loader").toggle();прежде чем сделать длительный запрос, чтобы запустить анимацию, и сделать еще один вызов в функции обратного вызова запроса, чтобы скрыть ее.Я использую CSS3 для анимации
источник