Как отобразить индикатор "занято" с помощью jQuery?

Question

Как отобразить индикатор "занято" с помощью jQuery?

Как отобразить вращающийся индикатор "занято" в определенной точке веб-страницы?

Я хочу запустить/остановить индикатор, когда запрос Ajax начинается/завершается.

Это действительно просто вопрос показа/скрытия анимированный GIF, или есть более элегантное решение?

563 9

jQuery javascript

9 ответов:

Comments

Ничего не найдено.

Rodrigo · Accepted Answer · 2011-07-01 22:41:17

вы можете просто показать / скрыть gif, но вы также можете встроить его в ajaxSetup, поэтому он вызывается при каждом запросе ajax.
$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});
одно замечание заключается в том, что если вы хотите сделать конкретный запрос ajax без загрузки spinner, вы можете сделать это следующим образом:
$.ajax({
   global: false,
   // stuff
});
таким образом, предыдущий $.ajaxSetup мы не будем влиять на запрос с global: false.

более подробная информация доступна по адресу:http://api.jquery.com/jQuery.ajaxSetup

Sean W. · Accepted Answer · 2016-02-27 18:16:31

документация jQuery рекомендует делать что-то вроде следующего:
$( document ).ajaxStart(function() {
  $( "#loading" ).show();
}).ajaxStop(function() {
  $( "#loading" ).hide();
});
здесь #loading это элемент с вашим индикатором занятости в нем.

ссылки:

http://api.jquery.com/ajaxStart/

http://api.jquery.com/ajaxStop/

кроме того, jQuery.ajaxSetup API явно рекомендует избегать jQuery.ajaxSetup для эти:

Примечание: глобальные функции обратного вызова должны быть установлены с их соответствующими глобальными методами обработчика событий Ajax -.ajaxStart(),.ajaxStop(),.ajaxComplete(),.ajaxError(),.ajaxSuccess(),.ajaxSend()а не в

Elliott · Accepted Answer · 2010-12-05 04:28:08

Я, как правило, просто показать/скрыть IMG, как другие заявили. Я нашел хороший сайт, который генерирует "загрузка картинки"

ссылке Я просто положил его внутрь div и скрыть по умолчанию display: none; (css) затем при вызове функции показать изображение, как только его полное скрыть его снова.

Chase Florell · Accepted Answer · 2010-12-04 21:06:50

да, это действительно просто вопрос показа / скрытия анимированного gif.

kobe · Accepted Answer · 2010-12-04 21:09:30

Я сделал это в мой проект ,

сделайте div с обратным url-адресом в качестве gif, который является не чем иным, как анимацией gif
<div class="busyindicatorClass"> </div>

.busyindicatorClass
{
background-url///give animation here
}
в вашем вызове ajax добавьте этот класс в div и в AJAX success удалите класс.

это будет делать трюк thatsit.

дайте мне знать, если вам нужно antthing еще, я могу дать вам более подробную информацию

в ajax успех удалить класс
success: function(data) {
    remove class using jquery
  }

albert yu · Accepted Answer · 2013-08-15 06:54:25

Я сделал это в моем проекте:

Глобальные События в применении.js:
$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });
"загрузки" - элемент для отображения и скрытия!

ссылки: http://api.jquery.com/Ajax_Events/

Ken Mc · Accepted Answer · 2014-10-08 04:34:41

Я должен использовать

HTML:
   <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

In script file:
  // invoked when sending ajax request
  $(document).ajaxSend(function () {
      $("#loading").show();
  });

  // invoked when sending ajax completed
  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

John M · Accepted Answer · 2016-06-10 17:03:12

чтобы немного расширить решение Родриго - для запросов, которые выполняются часто, вы можете отображать загрузочное изображение только в том случае, если запрос занимает больше минимального интервала времени, иначе изображение будет постоянно появляться и быстро исчезать
var loading = false;

$.ajaxSetup({
    beforeSend: function () {
        // Display loading icon if AJAX call takes >1 second
        loading = true;
        setTimeout(function () {
            if (loading) {
                // show loading image
            }
        }, 1000);            
    },
    complete: function () {
        loading = false;
        // hide loading image
    }
});

Sandeepraj Tandon · Accepted Answer · 2016-02-06 04:08:19

старый поток, но я хотел обновить, так как я работал над этой проблемой сегодня, у меня не было jquery в моем проекте, поэтому я сделал это простым старым способом javascript, мне также нужно было заблокировать контент на экране, поэтому в моем xhtml
    <img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>
в моем javascript
    document.getElementsByClassName('myclass').style.opacity = '0.7'
    document.getElementById('loading').style.display = "block";