Как показать загрузочный счетчик в jQuery?

Question

In 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?

Answer 1

Я также хочу внести свой вклад в этот ответ. Я искал что-то похожее в jQuery, и это то, что я в итоге использовал.

Я получил загрузочный счетчик от http://ajaxload.info/. Мое решение основано на этом простом ответе: http://christierney.com/2011/03/23/global-ajax-loading-spinners/.

В основном ваша HTML-разметка и CSS будут выглядеть так:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

И тогда ваш код для jQuery будет выглядеть примерно так:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

Это так просто:)

Answer 2

Помимо установки глобальных значений по умолчанию для событий ajax, вы можете установить поведение для определенных элементов. Возможно, достаточно просто сменить класс?

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

Пример CSS, чтобы скрыть #myForm с помощью счетчика:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}

Answer 3

Обратите внимание, что вы должны использовать асинхронные вызовы для работы счетчиков (по крайней мере, из-за этого мой не отображался до окончания вызова ajax, а затем быстро ушел, когда вызов завершился и удалил счетчик).

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });

Answer 4

$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });

Answer 5

Это очень простой и умный плагин для этой конкретной цели: https://github.com/hekigan/is-loading

Answer 6

JavaScript

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }

Answer 7

Это лучший способ для меня:

JQuery

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

Кофе

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

Документы: ajaxStart , ajaxStop

Answer 8

Я использовал следующее с JQuery UI Dialog. (Может быть, это работает с другими обратными вызовами Ajax?)

$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});

Содержит анимированный GIF-файл загрузки, пока его содержимое не будет заменено после завершения вызова ajax.

Answer 9

Мой ajax-код выглядит следующим образом, фактически я только что закомментировал строку async: false, и показывается счетчик.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

Я показываю счетчик внутри функции перед кодом AJAX:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

Для HTML я использовал классный шрифт:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

Надеюсь, это кому-нибудь поможет.

Answer 10

Если вы планируете использовать загрузчик каждый раз, когда вы делаете запрос к серверу, вы можете использовать следующий шаблон.

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

Этот код, в частности, использует плагин jajaxloader (который я только что создал)

https://github.com/lingtalfi/JAjaxLoader/