it-swarm-eu.dev

Jak zobrazit nakládací spinner v jQuery?

Prototyp S tímto kódem mohu zobrazit obrázek „načítám ...“

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

function showLoad () {
    ...
}

jQuery, Mohu načíst stránku serveru do prvku s tímto:

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

ale jak k tomuto příkazu připojím zaváděcí rozvaděč jako v Prototypu?

391
Edward Tanguay

Existuje několik způsobů. Můj upřednostňovaný způsob je připojit funkci k událostem ajaxStart/Stop na samotném prvku.

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

Funkce ajaxStart/Stop se spustí vždy, když budete volat na Ajax.

Aktualizace: Od jQuery 1.8 dokumentace uvádí, že .ajaxStart/Stop by měl být připojen pouze k document. To by transformovalo výše uvedený úryvek na:

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

Pro jQuery používám

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

Stačí použít funkci .ajax jQuery a použít její volbu beforeSend a definovat nějakou funkci, ve které můžete ukázat něco jako zavaděč div a na základě úspěchu můžete skrýt zavaděč 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();
    }
});

Můžete mít libovolný obrázek Spinning Gif. Zde je web, který je skvělým AJAX Generátorem Loader podle vašeho barevného schématu: http://ajaxload.info/

37
Seeker

Animovaný obrázek můžete vložit do DOM těsně před voláním AJAX a odebrat jej můžete pomocí funkce inline ...

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

Tím zajistíte, že vaše animace začne ve stejném rámci na následných požadavcích (pokud je to důležité). Uvědomte si, že staré verze IE možná mají potíže s animací.

Hodně štěstí!

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

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

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

20
Brent

Pokud používáte $.ajax(), můžete použít něco takového:

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

Použijte zaváděcí plugin: http://plugins.jquery.com/project/loading

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

Varianta: Mám ikonu s id = "logo" v levém horním rohu hlavní stránky; když se pracuje s Ajaxem, pak se nahoře (s průhledností) překryje točící se gif.

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

Chci také přispět k této odpovědi. Hledal jsem něco podobného v jQuery a tohle jsem nakonec použil.

Nakladač jsem dostal od http://ajaxload.info/ . Moje řešení je založeno na této jednoduché odpovědi na http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

V zásadě by vaše značka HTML a CSS vypadaly takto:

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

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

A pak kód pro jQuery bude vypadat asi takto:

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

Je to tak jednoduché :)

7
Brendan Vogt

Nakonec jsem skončil se dvěma změnami původní odpověď .

  1. Od jQuery 1.8 by ajaxStart a ajaxStop měly být připojeny pouze k document. To ztěžuje filtrování pouze některých požadavků ajaxu. Soo ...
  2. Přepnutí na ajaxSend a ajaxComplete umožňuje interspektovat aktuální požadavek ajax před zobrazením spinneru.

Toto je kód po těchto změnách:

$(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();
    })
7
Emil Stenström

Můžete jednoduše přiřadit obrázek zavaděče ke stejné značce, do které později nahrajete obsah pomocí volání Ajax:

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

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

Značku span můžete také nahradit obrázkovou značkou.

7
Umesh kumar

Kromě nastavení globálních výchozích hodnot pro události Ajax můžete také nastavit chování pro konkrétní prvky. Bude stačit jen změna jejich třídy?

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

Příklad CSS, skrýt #myForm pomocí číselníku:

.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;  
}
6
LeeGee
$('#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>');

            }
        });
4
Izabela Skibinska

Uvědomte si, že musíte používat asynchronní volání, aby fungovaly přadleny (přinejmenším to způsobilo, že se můj důl nezobrazil, až po volání ajaxu a poté rychle odešel, jakmile hovor skončil a odstraňte rozmetač).

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

V dialogu jQuery UI jsem použil následující. (Možná to funguje s dalšími zpětnými voláními Ajax?)

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

Obsahuje animovaný načítací gif, dokud není jeho obsah po dokončení volání ajaxu nahrazen.

2
Quinn Comendant

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

To je pro mě nejlepší způsob:

jQuery :

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

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

Káva :

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

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

Dokumenty: ajaxStart , ajaxStop

2
Fred K

Jedná se o velmi jednoduchý a inteligentní plugin pro tento konkrétní účel: https://github.com/hekigan/is-loading

2
andcl

Pokud plánujete použít zavaděč pokaždé, když zadáte požadavek na server, můžete použít následující vzorec.

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

Tento kód používá zejména plugin jajaxloader (který jsem právě vytvořil)

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

1
ling

Pokud nechcete psát svůj vlastní kód, existuje také spousta pluginů, které dělají jen to:

1
keithhackbarth

Dělám 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);
                        }
             });
1
user968652

Myslím, že máš pravdu. Tato metoda je příliš globální ...

Je to však dobré výchozí nastavení, když volání AJAX nemá žádný vliv na samotnou stránku. (například uložení na pozadí). (vždy můžete vypnout pro určité volání ajax předáním "global": false - viz dokumentace na jquery

Když má volání AJAX obnovovat část stránky, líbí se mi, že moje „načítání“ obrázků je specifické pro obnovenou sekci. Chtěl bych vidět, která část je obnovena.

Představte si, jak by to bylo skvělé, kdybyste mohli jednoduše napsat něco jako:

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

A to by v této sekci ukázalo „načtení“. Níže je funkce, kterou jsem napsal, která také zpracovává „načítání“ displeje, ale je specifická pro oblast, kterou v Ajaxu obnovujete.

Nejprve vám ukážu, jak ji používat

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

A to je funkce - základní začátek, který můžete vylepšit, jak si přejete. je velmi flexibilní.

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);
};
1
guy mograbi

Můj kód Ajax vypadá takto, ve skutečnosti jsem právě okomentoval asynchronní: falešný řádek a zobrazí se číselník.

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

Zobrazuji spinner ve funkci před kódem ajax:

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

Pro Html jsem použil úžasnou třídu písem:

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

Doufám, že to někomu pomůže.

1
Jaggan_j

Vždy můžete použít Block UI jQuery plugin , který dělá vše pro vás, a dokonce blokuje stránku jakéhokoli vstupu, zatímco se načítá ajax. V případě, že plugin nefunguje, můžete si přečíst o správném způsobu jeho použití v této odpovědi. Vyzkoušejte to.

0
SamyCode