Jak pokazać wczytywanie spinnera w jQuery?

Do jQuery używam

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

Możesz po prostu użyć funkcji jQuery .ajax i użyć jej opcji beforeSend i zdefiniować jakąś funkcję, w której możesz pokazać coś w rodzaju Loader div, a przy opcji success możesz ukryć ten Loader 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();
    }
});

Możesz mieć dowolny obracający się obraz Gif. Oto strona, która jest świetnym generatorem AJAX Loader zgodnie z Twoim schematem kolorów: http://ajaxload.info/

Możesz wstawić animowany obraz do DOM tuż przed wywołaniem AJAX i wykonać funkcję inline, aby go usunąć...

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

Spowoduje to, że Twoja animacja rozpocznie się w tej samej klatce przy kolejnych żądaniach (jeśli to ma znaczenie). Zauważ, że stare wersje IE mogą mieć problemy z animacją.

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

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

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

Jeśli używasz $.ajax() możesz użyć czegoś takiego:

$.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'
    });  

Użyj wtyczki ładowania: http://plugins.jquery.com/project/loading

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

Variant: mam ikonę z id = "logo" w lewym górnym rogu strony głównej; GIF spinner jest następnie nakładany na górę (z przezroczystością), gdy ajax działa.

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

Skończyłem z dwoma zmianami w oryginalnej odpowiedzi .

1. od wersji jQuery 1.8, ajaxStart i ajaxStop powinny być dołączane tylko do document. Utrudnia to filtrowanie tylko niektórych żądań ajax. Soo...
2. przełączenie na ajaxSendi ajaxComplete umożliwia interspektowanie bieżącego żądania ajax przed pokazaniem spinnera.

Oto kod po tych zmianach:

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

Chcę również przyczynić się do tej odpowiedzi. Szukałem czegoś podobnego w jQuery i to, czego ostatecznie użyłem.

Dostałem swój spinner z http://ajaxload.info/. moje rozwiązanie opiera się na tej prostej odpowiedzi na http://christierney.com/2011/03/23/global-ajax-loading-spinners/.

Zasadniczo znaczniki HTML i CSS wyglądałyby tak:

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

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

A potem kod do jQuery wyglądałby jak to:

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

To takie proste:)

Możesz po prostu przypisać obraz loadera do tego samego znacznika, na którym później załadujesz zawartość za pomocą wywołania Ajax:

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

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

Można również zastąpić znacznik span znacznikiem obrazu.

Oprócz ustawienia globalnych wartości domyślnych dla zdarzeń ajax, można ustawić zachowanie dla określonych elementów. Może wystarczy zmiana klasy?

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

Przykładowy CSS, aby ukryć #myForm za pomocą spinnera:

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

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

            }
        });

Użyłem poniższego okna dialogowego jQuery UI. (Może działa z innymi wywołaniami ajax?)

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

Zawiera animowany ładujący gif, dopóki jego zawartość nie zostanie zastąpiona po zakończeniu wywołania ajax.

To jest najlepszy sposób dla mnie:

JQuery :

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

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

Kawa :

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

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

Docs: ajaxStart, ajaxStop

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

Zauważ, że musisz używać wywołań asynchronicznych, aby Spinnery działały (przynajmniej to spowodowało, że moje nie pokazywało się dopiero po wywołaniu ajax, a następnie szybko zniknęło po zakończeniu połączenia i usunięciu spinnera).

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

Jest to bardzo prosta i inteligentna wtyczka do tego konkretnego celu: https://github.com/hekigan/is-loading

Robię to:

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

Myślę, że masz rację. Ta metoda jest zbyt globalna...

Jednak-jest to dobra domyślna opcja, gdy wywołanie AJAX nie ma wpływu na samą stronę. (np. zapis w tle). ( zawsze możesz go wyłączyć dla określonego wywołania ajax, przekazując "global": false-zobacz dokumentację w jquery

Gdy wywołanie AJAX ma odświeżyć część strony, lubię, gdy moje" ładowanie " obrazów jest specyficzne dla odświeżonej sekcji. Chciałbym zobaczyć, która część jest odświeżona.

Wyobraź sobie, jak fajnie byłoby, gdybyś mógł po prostu napisać coś w stylu:

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

I to pokazuje "ładowanie" w tej sekcji. Poniżej jest funkcja, którą napisałem, że obsługuje" ładowanie " wyświetlacz, jak również, ale jest to specyficzne dla obszaru, które są odświeżania w ajax.

Po pierwsze, pozwól, że pokażę Ci, jak go używać

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

I to jest funkcja-podstawowy początek, który możesz ulepszyć, jak chcesz. jest bardzo elastyczny.

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

Jeśli nie chcesz pisać własnego kodu, istnieje również wiele wtyczek, które właśnie to robią:

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

Jeśli planujesz używać loadera za każdym razem, gdy składasz żądanie serwera, możesz użyć następującego wzoru.

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

Ten kod w szczególności wykorzystuje wtyczkę jajaxloader (którą właśnie stworzyłem)

Https://github.com/lingtalfi/JAjaxLoader/

Zawsze możesz użyć Block UI jQuery plugin który robi wszystko za Ciebie, a nawet blokuje stronę dowolnego wejścia podczas ładowania ajax. W przypadku, gdy wtyczka wydaje się nie działać, można przeczytać o właściwym sposobie korzystania z niego w tej odpowiedzi.Zobacz też

Mój kod ajax wygląda tak, w efekcie właśnie skomentowałem linię async: false i pojawia się spinner.

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

Pokazuję spinner w funkcji przed kodem ajax:

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

Dla Html, użyłem Font awesome class:

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