Показать изображение загрузки, пока выполняется $ .ajax
Мне просто интересно, как показать изображение, которое указывает, что асинхронный запрос выполняется. Я использую следующий код для выполнения асинхронного запроса:
10 ответов
Конечно, вы можете показать его перед выполнением запроса и скрыть после его завершения:
Я обычно предпочитаю более общее решение связать его с глобальными событиями ajaxStart и ajaxStop, чтобы оно отображалось для всех событий ajax:
Может кто-нибудь объяснить, почему это не работает?
Я думаю, что это может быть лучше, если у вас есть тонны вызовов $ .ajax
ПРИМЕЧАНИЕ.
Если вы используете CSS. Элемент, который вы хотите показать, когда ajax извлекает данные из вашего внутреннего кода, должен быть таким.
Вы можете добавить ajax start и complete, это работает, когда вы нажимаете на событие кнопки.
Перед вашим вызовом либо вставьте загрузочное изображение в div / span, а затем в функции успеха удалите это изображение. В качестве альтернативы вы можете настроить класс CSS, например загрузка, которая может выглядеть следующим образом
А затем назначьте этот класс span / div и очистите его в функции успеха
«Изображение», которое люди обычно показывают во время вызова AJAX, представляет собой анимированный GIF. Поскольку невозможно определить процент выполнения запроса ajax, используемые анимированные картинки представляют собой неопределенные счетчики. Это просто изображение, повторяющееся снова и снова, как шарик из кругов разных размеров. http://ajaxload.info/. Хороший сайт для создания собственного настраиваемого блесна.
Используйте beforeSend объекта ajax и завершите функции. Лучше показать gif изнутри beforeSend, чтобы все поведение было заключено в один объект. Будьте осторожны, скрывая гифку с помощью функции успеха. Если запрос не выполнен, вы, вероятно, все равно захотите скрыть GIF. Для этого используйте функцию Complete. Это будет выглядеть так:
Это позволяет блокировать определенные элементы страницы или всю страницу во время выполнения запроса ajax.
Используйте изображение GIF в Javascript, ожидая данных
Пока вы ожидаете «данные реального времени» с сервера, я хочу отобразить gif изображение. В противном случае клиент ничего не видит и не знает о статусе своего запроса. Например, с изображением gif, таким как «таймер с яйцом», они, по крайней мере, знали бы, что запрос отправлен, и клиент теперь ожидает ответа.
Вот как я его закодировал:
Я использую websockets для протокола связи между клиентом и сервером. Но изображение gif не отображается во время ожидания data с сервера.
Я новичок в javascript, поэтому не уверен, что за ошибка
Спасибо за помощь, ваши предложения получили изображение GIF для работы.
НО изображение, которое я получаю, не является gif но выглядит как сломанный значок изображения (Chrome и ничего в Firefox). Это код:
Как отобразить gif пока идет запрос
Как показать загрузку gif, когда выполняется форма отправки JQuery
Я пытаюсь показать простой spinner gif, пока выполняется отправка (это занимает немного времени, потому что мне нужно установить связь с поставщиками через веб-службы).
Итак, у меня есть это:
дело в том, что .gif не показывает никакой анимации, он как бы заморожен.
Есть другой способ реализовать это (обратите внимание, что я не использую AJAX и не хочу)?
Я предполагаю, что вы используете анимированный gif, и что он анимируется, если вы показываете его «нормально» — Muad’Dib
Если же линия индикатора gif заморожен, что не имеет ничего общего с JavaScript / jQuery. — Sparky
GIF заморожен, потому что IE6, IE7 и IE 8 содержат ошибки. Пока не знаю про IE9, но точно знаю во всех остальных браузерах гифка НЕ зависает. Прочтите это для правильный ответ и для некоторые возможные обходные пути. — Marco Demaio
GIF зависает на моем Ubuntu / Firefox, но не на моем Ubuntu / Chromium — Pierre de LESPINAY
5 ответы
Использование jQuery submit функцию, вы можете указать загружаемое изображение следующим образом:
Использование show hide с функцией отправки сработало хорошо. Просто и надежно. — щенок
Вы пробовали загрузить изображение в готовый документ, только скрывая его. Затем отобразить это в своей функции? Таким образом, изображение уже загружено и вращается.
Это сработало . В моих тестах изображение продолжает зависать в IE7 и IE8, во всех остальных браузерах изображение НЕ зависает до тех пор, пока не будет получен ответ сервера. — Марко Демайо
Это не работает с моим Ubuntu / Firefox (зависает gif-анимация) — Пьер де ЛЕСПИНЭ
Настоящая проблема с вашей реализацией заключается в том, как клиентская сторона узнает, когда ваш запрос завершен. Одна из причин, по которой Ajax полезен, заключается в том, что у нас есть понятие состояний, и поэтому мы можем отображать загрузчик, пока клиент ожидает ответа, и удалять загрузчик, когда клиент получает ответ.
Как вы собираетесь определить, когда связь с веб-службой завершена? Вы говорите, что не хотите использовать Ajax, но если вы собираетесь запросить службу, чтобы определить, завершено ли ваше общение, вы, вероятно, видите что-то, для чего потребуется Ajax.
Это обычная отправка формы, когда вы нажимаете на нее, браузер не уводит вас, пока сервер не ответит на запрос, давая анимации время немного покрутиться. Однако в IE (проверено 7-9) запуск запроса заморозит анимацию, даже если она уже вращалась на странице. — Эсаилия
Использовать .show () и .hide () для переключения анимации загрузки во время отправки?
Идет AJAX загрузка. Подождите…
… для того, чтобы показать пользователю, что на фоне веб-приложения идет загрузка используется анимированная гифка вроде этой:
Типичный подход при этом:
1. показать крутящуюся гифку в углу или где-нибудь на видном месте
2. начать загрузку (XHttpRequest и Ко)
3. когда загрузка заканчивается, убираем картинку.
Использовать анимацию курсора для отображения занятости приложения.
Скажем, в jQuery для этого достаточно выполнить:
$(«*»).css(«cursor», «wait»);
Данный сниппет поменяет состояние курсора над всеми элементами. Однако, почему бы и не ограничиться каким-нибудь конкретным объектом?
Плюсы
* Никаких изменений в структуре разметки
* Не задействовано никаких внешних элементов (можно, правда, использовать собственные *.cur файлы. Достоверный источник сообщает, что эта фича поддерживается всеми современными браузерами)
* Весьма интуитивно само по себе
Минусы
* Выглядит, как будто завис браузер (но если использовать нестандартный курсор, вполне отличимо)
* В разных ОСях выглядит по-разному (кстати, это и минус и плюс)
P.S.: пока искал прелоадер, случайно нашел сайт: www.loadinfo.net. Там можно сгенерить себе красивый прелоадер =)
Edit:
Вот, например, на подобной штуке, это выглядело бы очень уместно:
www.extjs.com/deploy/dev/examples/desktop/desktop.html
Edit2:
Вот этот курсор, собственно, даже лучше подходит, чем «wait»:
$(«*»).css(«cursor», «progress»);
PyQt5: Как воспроизвести гифку во время выполнения основного кода?
Мне нужно во время выполнения функции osnova воспроизводить гифку. А когда прекращается выполнение функции завершить воспроизведение гифки. Набросал такой код, но не могу понять, что дальше.
А как сделать так, чтобы вместо прогресБаров были к примеру запросы. Пока выполняются requests запросы, производится гифка. Выполнение запросов закончилось, гифка вырубается?
Вставляйте в метод osnovaNew что хотите и испускайте нужный вам сигнал:
А как из класса App передать в класс Worker переменную? У вас там уже введён сайт вики, а у меня пользователь вводит сайт в QLineEdit (в классе App)
Показывать загрузку изображения в формате gif при запуске кода на стороне клиента
Предположим, что loading класс css прикреплен к div, который содержит анимированное изображение в формате gif ( классический счетчик ).
Мы привыкли видеть вращающееся изображение счетчика, пока клиент выполняет запрос ajax серверу, оставляя управление механизму JavaScript, который может анимировать счетчик до тех пор, пока обратный вызов запроса ajax не вернется.
Однако в приведенном выше примере нет задействованного ajax, а «трудоемкий код» расположен на стороне клиента , что означает, что движок JavaScript не может анимировать gif, выполняя некоторую дорогостоящую работу на клиенте.
Я знаю, что в JavaScript нет (собственных) потоков, так как я могу показать этот счетчик и вращаться при выполнении некоторого кода JavaScript?
Как показать загрузку gif, когда выполняется форма отправки JQuery
Я пытаюсь показать простой spinner gif, пока выполняется отправка (это занимает немного времени, потому что мне нужно установить связь с поставщиками через веб-службы).
Итак, у меня есть это:
дело в том, что .gif не показывает никакой анимации, он как бы заморожен.
Есть другой способ реализовать это (обратите внимание, что я не использую AJAX и не хочу)?
Я предполагаю, что вы используете анимированный gif, и что он анимируется, если вы показываете его «нормально» — Muad’Dib
Если же линия индикатора gif заморожен, что не имеет ничего общего с JavaScript / jQuery. — Sparky
GIF заморожен, потому что IE6, IE7 и IE 8 содержат ошибки. Пока не знаю про IE9, но точно знаю во всех остальных браузерах гифка НЕ зависает. Прочтите это для правильный ответ и для некоторые возможные обходные пути. — Marco Demaio
GIF зависает на моем Ubuntu / Firefox, но не на моем Ubuntu / Chromium — Pierre de LESPINAY
5 ответы
Использование jQuery submit функцию, вы можете указать загружаемое изображение следующим образом:
Использование show hide с функцией отправки сработало хорошо. Просто и надежно. — щенок
Вы пробовали загрузить изображение в готовый документ, только скрывая его. Затем отобразить это в своей функции? Таким образом, изображение уже загружено и вращается.
Это сработало . В моих тестах изображение продолжает зависать в IE7 и IE8, во всех остальных браузерах изображение НЕ зависает до тех пор, пока не будет получен ответ сервера. — Марко Демайо
Это не работает с моим Ubuntu / Firefox (зависает gif-анимация) — Пьер де ЛЕСПИНЭ
Настоящая проблема с вашей реализацией заключается в том, как клиентская сторона узнает, когда ваш запрос завершен. Одна из причин, по которой Ajax полезен, заключается в том, что у нас есть понятие состояний, и поэтому мы можем отображать загрузчик, пока клиент ожидает ответа, и удалять загрузчик, когда клиент получает ответ.
Как вы собираетесь определить, когда связь с веб-службой завершена? Вы говорите, что не хотите использовать Ajax, но если вы собираетесь запросить службу, чтобы определить, завершено ли ваше общение, вы, вероятно, видите что-то, для чего потребуется Ajax.
Это обычная отправка формы, когда вы нажимаете на нее, браузер не уводит вас, пока сервер не ответит на запрос, давая анимации время немного покрутиться. Однако в IE (проверено 7-9) запуск запроса заморозит анимацию, даже если она уже вращалась на странице. — Эсаилия
Использовать .show () и .hide () для переключения анимации загрузки во время отправки?