В Prototype я могу показать изображение «loading ...» с этим кодом:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
В jQuery я могу загрузить страницу сервера в элемент с помощью этого:
$('#message').load('index.php?pg=ajaxFlashcard');
но как мне добавить к этой команде загрузочный счетчик, как я это делал в Prototype?
jquery
spinner
prototypejs
equivalence
language-interoperability
Эдвард Тангей
источник
источник
Для jQuery я использую
источник
beforeSend
вызывается перед каждым вызовом, аajaxStart
срабатывает только при вызове первого метода ajax. АналогичноajaxStop
, он вызывается, когда завершается последний вызов ajax. Если у вас более одного одновременного запроса, фрагмент этого ответа не будет работать должным образом.Вы можете просто использовать
.ajax
функцию jQuery и использовать ее опциюbeforeSend
и определить некоторую функцию, в которой вы можете показать что-то вроде div загрузчика, а в случае успеха вы можете скрыть этот загрузчик div.Вы можете иметь любое изображение Spinning Gif. Вот сайт, который является отличным AJAX Loader Generator в соответствии с вашей цветовой схемой: http://ajaxload.info/
источник
success
Не будет вызываться , если есть ошибка, но «вы всегда получитеcomplete
обратный вызов, даже для синхронных запросов,» в соответствии с JQuery Ajax событий .Вы можете вставить анимированное изображение в DOM прямо перед вызовом AJAX и выполнить встроенную функцию для его удаления ...
Это обеспечит, чтобы ваша анимация начиналась с того же кадра при последующих запросах (если это имеет значение). Обратите внимание, что старые версии IE могут иметь проблемы с анимацией.
Удачи!
источник
http://docs.jquery.com/Ajax/load#urldatacallback
источник
Если вы используете,
$.ajax()
вы можете использовать что-то вроде этого:источник
Используйте плагин загрузки: http://plugins.jquery.com/project/loading
источник
Вариант: у меня есть значок с id = "логотип" в левом верхнем углу главной страницы; GIF вращающегося затем накладывается сверху (с прозрачностью), когда работает AJAX.
источник
Я закончил с двумя изменениями в исходном ответе .
document
. Это затрудняет фильтрацию только некоторых запросов AJAX. Soo ...Это код после этих изменений:
источник
ajaxComplete
кажется, срабатывает преждевременно , когда запросы повторить, поэтому я использовал комбинациюajaxSend
иajaxStop
и он прекрасно работает.Я также хочу внести свой вклад в этот ответ. Я искал что-то подобное в jQuery, и это то, что я в конечном итоге использовал.
Я получил свой загрузочный счетчик с http://ajaxload.info/ . Мое решение основано на этом простом ответе по адресу http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .
В основном ваша HTML-разметка и CSS будут выглядеть так:
И тогда код для jQuery будет выглядеть примерно так:
Это так просто, как это :)
источник
Вы можете просто назначить образ загрузчика тому же тегу, на который вы позже будете загружать контент, используя вызов Ajax:
Вы также можете заменить тег span на тег image.
источник
Помимо установки глобальных значений по умолчанию для событий AJAX, вы можете установить поведение для определенных элементов. Возможно, достаточно просто поменять свой класс?
Пример CSS, чтобы скрыть #myForm с помощью спиннера:
источник
Обратите внимание, что вы должны использовать асинхронные вызовы для работы счетчиков (по крайней мере, это заставило мой не показывать до окончания вызова ajax, а затем быстро ушел, когда вызов завершился и удалил счетчик).
источник
источник
Я использовал следующее с JQuery UI Dialog. (Может быть, это работает с другими обратными вызовами Ajax?)
Содержит анимированный GIF-файл загрузки, пока его содержимое не будет заменено после завершения вызова ajax.
источник
Это лучший способ для меня:
JQuery :
Кофе :
Документы: ajaxStart , ajaxStop
источник
JavaScript
CSS
источник
Это очень простой и умный плагин для этой конкретной цели: https://github.com/hekigan/is-loading
источник
Я делаю это:
источник
Я думаю, вы правы. Этот метод слишком глобален ...
Однако - это хороший вариант по умолчанию, когда ваш вызов AJAX не влияет на саму страницу. (фон сохранить, например). (вы всегда можете отключить его для определенного вызова ajax, передав «global»: false - см. документацию в jquery
Когда вызов AJAX предназначен для обновления части страницы, мне нравится, когда мои «загружаемые» изображения относятся к обновленному разделу. Я хотел бы увидеть, какая часть обновляется.
Представьте, как было бы здорово, если бы вы могли просто написать что-то вроде:
И это будет показывать «загрузку» в этом разделе. Ниже приведена функция, которую я написал, которая также обрабатывает отображение «загрузки», но она относится к области, которую вы обновляете в ajax.
Во-первых, позвольте мне показать вам, как его использовать
И это функция - базовый старт, который вы можете улучшить по своему желанию. это очень гибкий.
источник
Если вы не хотите писать свой собственный код, есть также множество плагинов, которые делают именно это:
источник
Если вы планируете использовать загрузчик каждый раз, когда вы делаете запрос к серверу, вы можете использовать следующий шаблон.
Этот код, в частности, использует плагин jajaxloader (который я только что создал)
https://github.com/lingtalfi/JAjaxLoader/
источник
Мой AJAX-код выглядит следующим образом, по сути, я только что закомментировал строку async: false, и показывается счетчик.
Я показываю счетчик внутри функции перед кодом ajax:
Для HTML я использовал класс font классный:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
Надеюсь, это кому-нибудь поможет.
источник
Вы всегда можете использовать плагин Block UI jQuery, который сделает все за вас, и даже блокирует страницу любого ввода во время загрузки ajax. Если плагин, кажется, не работает, вы можете прочитать о том, как правильно использовать его в этом ответе. Проверьте это.
источник