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

Ответ 1

Вы можете просто показать/скрыть gif, но вы также можете вставить это в ajaxSetup, поэтому он вызывал каждый запрос ajax.

$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});

Следует отметить, что если вы хотите выполнить конкретный запрос ajax без загрузчика, вы можете сделать это следующим образом:

$.ajax({
   global: false,
   // stuff
});

Таким образом предыдущий $.ajaxSetup, который мы сделали, не повлияет на запрос с помощью global: false.

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

Ответ 2

Документация 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() -rather, чем в пределах options объект для $.ajaxSetup().

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

сделайте div с задним земным url как gif, что не что иное, как анимация gif

<div class="busyindicatorClass"> </div>

.busyindicatorClass
{
background-url///give animation here
}

в вашем вызове ajax, добавьте этот класс в div и в ajax-успех удалите класс.

он выполнит трюк thatsit.

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

в успехе ajax удалите класс

success: function(data) {
    remove class using jquery
  }

Ответ 6

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

Глобальные события в application.js:

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

"Загрузка" - это элемент, который нужно показать и скрыть!

Литература: http://api.jquery.com/Ajax_Events/

Ответ 7

Мне пришлось использовать

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();
  });

Ответ 8

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

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
    }
});

Ответ 9

Старый поток, но я хотел обновить, так как сегодня я работал над этой проблемой, У меня не было 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";