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

Question

В Опытный образец Я могу показать изображение «загрузка...» с помощью этого кода:

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

Есть несколько способов.Мой предпочтительный способ — прикрепить функцию к событиям ajaxStart/Stop самого элемента.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Функции ajaxStart/Stop будут срабатывать всякий раз, когда вы выполняете какие-либо вызовы Ajax.

Обновлять:Начиная с jQuery 1.8, в документации указано, что .ajaxStart/Stop следует прикреплять только к document.Это преобразует приведенный выше фрагмент в:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Answer 2

Для jQuery я использую

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

Answer 3

Вы можете просто использовать jQuery .ajax функцию и используйте ее опцию beforeSend и определите некоторую функцию, в которой вы можете показать что-то вроде div-загрузчика, а в случае успеха вы можете скрыть этот div-загрузчик.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Вы можете использовать любое изображение Spinning Gif.Вот веб-сайт, который является отличным генератором загрузчика AJAX в соответствии с вашей цветовой схемой: http://ajaxload.info/

Answer 4

Вы можете вставить анимированное изображение в DOM прямо перед вызовом AJAX и выполнить встроенную функцию для его удаления...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

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

Удачи!

Answer 5

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

Answer 6

Если вы используете $.ajax() вы можете использовать что-то вроде этого:

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: 'POST', dataType: 'json'
    });  

Answer 7

Используйте плагин загрузки: http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

Answer 8

Вариант:У меня есть значок с id="logo" в левом верхнем углу главной страницы;затем gif-спиннер накладывается сверху (с прозрачностью), когда работает ajax.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});

Answer 9

В итоге я сделал два изменения в оригинальный ответ.

1. Начиная с jQuery 1.8, ajaxStart и ajaxStop следует присоединять только к document.Это усложняет фильтрацию только некоторых запросов ajax.Су...
2. Переключение на ajaxОтправить и ajaxComplete позволяет проверять текущий запрос ajax перед отображением счетчика.

Это код после этих изменений:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

Answer 10

Я также хочу внести свой вклад в этот ответ.Я искал что-то подобное в 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 11

Вы можете просто назначить изображение загрузчика тому же тегу, в который вы позже будете загружать контент, используя вызов Ajax:

$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');

Вы также можете заменить тег span тегом изображения.

Answer 12

Помимо установки глобальных значений по умолчанию для событий 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 13

Обратите внимание, что вы должны использовать асинхронные вызовы для работы счетчиков (по крайней мере, это то, из-за чего мой не отображался до тех пор, пока не будет выполнен вызов 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 14

$('#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 15

Я использовал следующее в диалоговом окне пользовательского интерфейса jQuery.(Может быть, это работает с другими обратными вызовами 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 16

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

jQuery:

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

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

Кофе:

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

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

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

Answer 17

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 18

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

Answer 19

Я делаю это:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });

Answer 20

Я думаю ты прав.Этот метод слишком глобальный...

Однако это хороший вариант по умолчанию, когда ваш вызов AJAX не влияет на саму страницу.(например, фоновое сохранение).(вы всегда можете отключить его для определенного вызова ajax, передав «global»:false — см. документацию по адресу jquery

Когда вызов AJAX предназначен для обновления части страницы, мне нравится, чтобы мои «загружаемые» изображения были привязаны к обновленному разделу.Я хотел бы посмотреть, какая часть обновлена.

Представьте, как было бы здорово, если бы вы могли просто написать что-то вроде:

$("#component_to_refresh").ajax( { ... } ); 

И это покажет «загрузку» в этом разделе.Ниже приведена функция, которую я написал, которая также обрабатывает «загрузочное» отображение, но она специфична для области, которую вы обновляете в ajax.

Сначала позвольте мне показать вам, как им пользоваться.

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

И это функция — базовый старт, который вы можете улучшить по своему желанию.это очень гибко.

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

Answer 21

Если вы не хотите писать свой собственный код, есть множество плагинов, которые делают именно это:

• https://github.com/keithhackbarth/jquery-loading
• http://plugins.jquery.com/project/loading

Answer 22

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

 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/

Answer 23

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

$.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 я использовал класс шрифта Awesome:

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

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

Answer 24

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