Jak pokazać ładowanie spinnera w jQuery?

W Prototypie mogę pokazać obraz „ładowanie ...” za pomocą tego kodu:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

W jQuery mogę załadować stronę serwera do elementu za pomocą:

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

ale w jaki sposób mogę dołączyć ładujący spinner do tego polecenia, tak jak w Prototypie?

Istnieje kilka sposobów. Moim preferowanym sposobem jest dołączenie funkcji do zdarzeń ajaxStart / Stop w samym elemencie.

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

Funkcje ajaxStart / Stop będą uruchamiane przy każdym wywołaniu Ajax.

Aktualizacja : Począwszy od jQuery 1.8, dokumentacja stwierdza, że .ajaxStart/Stopnależy tylko dołączyć document. Przekształci to powyższy fragment w:

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

Do jQuery używam

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

Możesz po prostu użyć funkcji jQuery .ajaxi użyć jej opcji beforeSendi zdefiniować funkcję, w której możesz pokazać coś takiego jak div programu ładującego, a po sukcesie możesz ukryć tę div programu ładującego.

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 obraz Spinning Gif. Oto strona internetowa, która jest świetnym generatorem AJAX Loader według twojego schematu kolorów: http://ajaxload.info/

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

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

To sprawi, że twoja animacja rozpocznie się od tej samej klatki przy kolejnych żądaniach (jeśli to ma znaczenie). Pamiętaj, że starsze wersje IE mogą mieć problemy z animacją.

Powodzenia!

$('#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 ładującej: http://plugins.jquery.com/project/loading

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

Wariant: Mam ikonę z id = „logo” w lewym górnym rogu strony głównej; spinner gif jest następnie nakładany na wierzch (z przezroczystością), gdy działa ajax.

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 dwiema zmianami w oryginalnej odpowiedzi .

1. Począwszy od jQuery 1.8, ajaxStart i ajaxStop powinny być dołączone tylko do document. Utrudnia to filtrowanie tylko niektórych żądań ajax. Soo ...
2. Przełączenie na ajaxSend i ajaxComplete umożliwia interpekcję bieżącego żądania ajax przed wyświetleniem pokrętła.

To jest 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 tego ostatecznie użyłem.

Mam ładujący spinner ze strony http://ajaxload.info/ . Moje rozwiązanie opiera się na tej prostej odpowiedzi pod adresem http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

Zasadniczo twój znacznik 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 dla jQuery wyglądałby mniej więcej tak:

<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 modułu ładującego 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żesz także zastąpić znacznik zakresu znacznikiem obrazu.

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

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

Przykład CSS, aby ukryć #myForm za pomocą pokrętła:

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

Zauważ, że musisz użyć asynchronicznych wywołań, aby błystki działały (przynajmniej to spowodowało, że moje wyświetlały się dopiero po wywołaniu ajax, a następnie szybko zniknęły, ponieważ połączenie zakończyło się i usunęło błystkę).

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

$('#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 następujących w oknie dialogowym interfejsu użytkownika jQuery. (Może to działa z innymi wywołaniami zwrotnymi ajax?)

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

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

To dla mnie najlepszy sposób:

jQuery :

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

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

Kawa :

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

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

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

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 dobre ustawienie domyślne, gdy wywołanie AJAX nie ma wpływu na samą stronę. (na przykład zapisywanie 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 na celu odświeżenie części strony, podoba mi się, że moje „ładowanie” obrazów jest specyficzne dla odświeżonej sekcji. Chciałbym zobaczyć, która część jest odświeżana.

Wyobraź sobie, jak fajnie by było, gdybyś mógł po prostu napisać coś takiego:

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

Oznaczałoby to „ładowanie” w tej sekcji. Poniżej jest funkcja, którą napisałem, która obsługuje również wyświetlanie „ładowania”, ale jest specyficzna dla obszaru, który odświeżasz w ajax.

Najpierw pokażę ci, jak z niego korzystać

<!-- 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 start, 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 to robią:

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

Jeśli planujesz używać modułu ładującego za każdym razem, gdy wysyłasz żądanie serwera, możesz użyć następującego wzorca.

 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 używa wtyczki jajaxloader (którą właśnie utworzyłem)

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

Mój kod ajax wygląda tak, w rzeczywistości właśnie skomentowałem async: false line i wyświetla 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ę kod w funkcji przed kodem ajax:

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

Do HTML użyłem niesamowitej klasy czcionek:

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

Mam nadzieję, że to komuś pomoże.

Zawsze możesz użyć wtyczki Block UI jQuery, która robi wszystko za Ciebie, a nawet blokuje stronę dowolnego wejścia podczas ładowania ajax. Jeśli wtyczka wydaje się nie działać, w tej odpowiedzi możesz przeczytać o właściwym sposobie jej użycia . Sprawdź to.