52 views

Hoe kan ik de laadspinner in jQuery tonen?

Hosted by Code Expert
jquery

In Prototypekan ik een “loading…” afbeelding tonen met deze code:

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

In jQuerykan ik hiermee een serverpagina in een element laden:

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

maar hoe bevestig ik een laadspinner aan dit commando zoals ik deed in Prototype?

Antwoord 1, autoriteit 100%

Er zijn een aantal manieren. Mijn voorkeur gaat uit naar het koppelen van een functie aan de ajaxStart/Stop-gebeurtenissen op het element zelf.

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

De ajaxStart/Stop-functies worden geactiveerd wanneer u Ajax-oproepen doet.

Update: vanaf jQuery 1.8 staat in de documentatie dat .ajaxStart/Stopalleen aan documentmag worden toegevoegd. Dit zou het bovenstaande fragment veranderen in:

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

Antwoord 2, autoriteit 28%

Voor jQuery gebruik ik

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

Antwoord 3, autoriteit 7%

Je kunt gewoon de functie .ajaxvan jQuery gebruiken en de optie beforeSendgebruiken en een functie definiëren waarin je zoiets als een loader-div kunt laten zien en bij succes de optie kan die loader-div verbergen.

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

Je kunt elke Spinning Gif-afbeelding hebben. Hier is een website die een geweldige AJAX Loader Generator is volgens jouw kleurenschema: http://ajaxload.info/

Antwoord 4, autoriteit 3%

Je kunt de geanimeerde afbeelding vlak voor de AJAX-aanroep in de DOM invoegen en een inline-functie uitvoeren om deze te verwijderen…

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

Dit zorgt ervoor dat uw animatie bij volgende verzoeken met hetzelfde frame begint (als dat van belang is). Houd er rekening mee dat oude versies van IE mogelijkproblemen kunnen hebben met de animatie.

Veel succes!

Antwoord 5, autoriteit 3%

Als je $.ajax()gebruikt, kun je zoiets als dit gebruiken:

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

Hoewel de instelling “beforeSend” heet, wordt vanaf jQuery 1.5 “beforeSend” aangeroepen het verzoektype.dwz de functie .show()wordt aangeroepen als type: 'GET'.

Antwoord 6, autoriteit 3%

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

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

Antwoord 7

Gebruik de laadplug-in: http://plugins.jquery.com/project/loading

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

Antwoord 8

Variant: ik heb een pictogram met id=”logo” linksboven op de hoofdpagina; er wordt dan een spinner-gif bovenop gelegd (met transparantie) wanneer ajax werkt.

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

Antwoord 9

Ik heb uiteindelijk twee wijzigingen aangebracht in het oorspronkelijke antwoord.

  1. vanaf jQuery 1.8, AjaxStart en AjaxStop mogen alleen worden bevestigd aan document. Dit maakt het moeilijker om slechts een deel van de AJAX-verzoeken te filteren. Soo …
  2. Overschakelen naar ajaxsend en Ajaxcomplete maakt het mogelijk om het huidige AJAX-verzoek te interspecteren voordat u de spinner laat zien.

Dit is de code na deze wijzigingen: 

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

Antwoord 10

Ik wil ook bijdragen aan dit antwoord. Ik was op zoek naar iets vergelijkbaars in jQuery en dit wat ik uiteindelijk heb geëindigd.

Ik heb mijn loading spinner van http://ajaxload.info/ . Mijn oplossing is gebaseerd op dit eenvoudige antwoord op http://christierney.com / 2011 / 03/23 / Global-Ajax-loading-spinners / .

In principe zouden uw HTML-markup en CSS er als volgt uitzien: 

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>
<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

En dan is uw code voor jQuery er zoiets uitzien: 

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

Zo simpel is het 🙂

Antwoord 11

U kunt eenvoudig een loader-afbeelding toewijzen aan dezelfde tag waarop u later inhoud gaat laden met een Ajax-aanroep:

$("#message").html('<span>Loading...</span>');
$('#message').load('index.php?pg=ajaxFlashcard');

Je kunt de span-tag ook vervangen door een afbeeldingstag.

Antwoord 12

Je kunt niet alleen algemene standaardwaarden instellen voor ajax-evenementen, maar ook gedrag instellen voor specifieke elementen. Misschien is het voldoende om van klas te veranderen?

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

Voorbeeld CSS, om #myForm te verbergen met een spinner:

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

Antwoord 13

Merk op dat u asynchrone oproepen voor spinners moet gebruiken om te werken (althans dat is wat de mijne heeft veroorzaakt om pas na het AJAX-oproep te laten zien en vervolgens snel wegging omdat de oproep de spinner was voltooid en de spinner was voltooid). 

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

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

Antwoord 15

Ik heb het volgende gebruikt met JQuery UI-dialoogvenster. (Misschien werkt het met andere Ajax-callbacks?) 

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

Het bevat een geanimeerde laad-gif totdat de inhoud wordt vervangen wanneer de ajax-oproep is voltooid.

Antwoord 16

Dit is de beste manier voor mij:

jQuery:

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

Koffie:

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

Documenten: ajaxStart, ajaxStop

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

Antwoord 18

Dit is een heel eenvoudige en slimme plug-in voor dat specifieke doel:
https://github.com/hekigan/is-loading

Antwoord 19

Ik doe dit:

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

Antwoord 20

Ik denk dat je gelijk hebt.
Deze methode is te globaal …

Maar – het is een goede standaard voor wanneer uw AJAX-oproep geen effect heeft op de pagina zelf. (bijvoorbeeld achtergrond opslaan). (U kunt het altijd uitschakelen voor een bepaalde AJAX-oproep door “Global” te passeren: FALSE – zie documentatie op jQuery

Wanneer het AJAX-oproep bedoeld is om een ​​deel van de pagina te vernieuwen, houd ik van mijn “loading” -afbeeldingen om specifiek te zijn voor het vernieuwde sectie. Ik zou graag zien welk deel is vernieuwd.

Stel je voor hoe cool het zou zijn als je eenvoudig iets zou kunnen schrijven als: 

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

En dit zou een “laden” in dit gedeelte laten zien.
Hieronder is een functie die ik heb geschreven die ook “loading” -display schreef, maar het is specifiek voor het gebied dat u in Ajax verfrissen.

Laat me eerst laten zien hoe je het gebruikt 

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

En dit is de functie – een basisstart dat u kunt verbeteren zoals u wilt. Het is erg flexibel. 

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

Antwoord 21

Als u uw eigen code niet wilt schrijven, zijn er ook veel plug-ins die precies dat doen:

Antwoord 22

Als u van plan bent om elke keer een lader te gebruiken, kunt u het volgende patroon gebruiken. 

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

Deze code gebruikt in het bijzonder de JAJAXLoader-plug-in (die ik zojuist heeft gemaakt)

https://github.com/lingtalfi/jajaxLoader/

Antwoord 23

Mijn Ajax-code ziet er zo uit als dit, in feite, ik heb zojuist async geformuleerd: valse lijn en de spinner verschijnt. 

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

Ik laat de spinner in een functie zien vóór de AJAX-code: 

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

Voor HTML heb ik een Font Awesome-klasse gebruikt:

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

Ik hoop dat het iemand helpt.

Antwoord 24

Je kunt altijd de Block UI jQuery plugingebruiken die alles voor je doet, en het blokkeert zelfs de pagina van elke invoer terwijl de ajax wordt geladen. In het geval dat de plug-in niet lijkt te werken, kun je lezen over de juiste manier om deze te gebruiken in dit antwoord .Bekijk het.

Previous articleHoe kan ik een JavaScript-object doorlopen of opsommen?
Next articleUitleg over runtimes van BFS en DFS

Other episodes

Hoe jQuery-ondersteuning in Aptana Studio 3 in te schakelen

jquery Code Expert - 0
Hoe kan ik jQuery inschakelen in Aptana Studio 3 (bèta)? Ik heb geen document gezien voor deze versie. Ondersteunt Aptana Studio 3 (bèta) jQuery? Antwoord 1, autoriteit...
Read more

SCRIPT5009: ‘URLSearchParams’ is niet gedefinieerd in IE 11

jquery Code Expert - 0
Ik probeer de URLSearchParamsuit te voeren, maar ik krijg een foutmelding op IE 11 omdat het daar niet wordt ondersteund. Het werkt perfect in...
Read more

jQuery-callback voor meerdere ajax-oproepen

jquery Code Expert - 0
Ik wil drie ajax-aanroepen doen in een klikgebeurtenis. Elke ajax-oproep voert een afzonderlijke bewerking uit en retourneert gegevens die nodig zijn voor een laatste...
Read more

jQuery krijgt muispositie binnen een element

jquery Code Expert - 0
Ik hoopte een besturingselement te maken waarbij een gebruiker in een div kan klikken, vervolgens de muis kan slepen en de muis vervolgens kan...
Read more

jQuery Scroll naar de onderkant van de pagina

jquery Code Expert - 0
Nadat mijn pagina klaar is met laden. Ik wil dat jQuery netjes naar de onderkant van de pagina scrolt, snel animeert, niet in een...
Read more

jQuery detecteert of tekstgebied leeg is

jquery Code Expert - 0
Ik probeer te bepalen of een tekstgebied leeg is als een gebruiker verwijdert wat al vooraf in het tekstgebied is ingevuld met jQuery. Hoe dan...
Read more

Kan ik jQuery UI 1.12.1 gebruiken met jQuery 3.x?

jquery Code Expert - 0
Ik heb mijn jQuery 1.7.2gewijzigd in 3.1.1en mijn jQuery-gebruikersinterface gewijzigd van versie 1.8.16in versie 1.12.1. Heel wat van mijn bestaande JS-dingen zijn kapot gegaan, zoals...
Read more

© Copyright - Code Expert 2021