Comment afficher le chargement de spinner dans jQuery?

Question

Dans Prototype , je peux afficher un "ient en cours de chargement ... " image avec ce code:

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

function showLoad () {
    ...
}

Dans jQuery , je peux charger une page de serveur dans un élément avec ceci:

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

mais comment puis-je attacher un spinner de chargement à cette commande comme je l'ai fait dans Prototype?

Answer 1

Il y a plusieurs façons. Ma méthode préférée consiste à attacher une fonction aux événements ajaxStart / Stop sur l'élément lui-même.

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

Les fonctions ajaxStart / Stop se déclenchent chaque fois que vous effectuez un appel Ajax.

Mise à jour : à compter de jQuery 1.8, la documentation indique que .ajaxStart/Stop ne doit être associé qu'à document. Cela transformerait l'extrait ci-dessus en:

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

Answer 2

J'utilise jQuery

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

Answer 3

Vous pouvez simplement utiliser la fonction .ajax de jQuery et son option beforeSend pour définir une fonction dans laquelle vous pouvez afficher quelque chose comme un div de chargeur et en cas de succès, vous pouvez masquer ce div de chargeur.

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

Vous pouvez avoir n'importe quelle image Spinning Gif. Voici un site Web qui constitue un excellent générateur de chargeur AJAX selon votre palette de couleurs: http://ajaxload.info/

Answer 4

Vous pouvez insérer une image animée dans le DOM juste avant l'appel AJAX et créer une fonction en ligne pour la supprimer ...

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

Cela garantira que votre animation commence à la même image lors des demandes suivantes (si cela compte). Notez que les anciennes versions d’IE pourraient rencontrer des difficultés avec l’animation.

Bonne chance!

Answer 5

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

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

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

Answer 6

Si vous utilisez $.ajax() vous pouvez utiliser quelque chose comme ceci:

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

Utilisez le plugin de chargement: http://plugins.jquery.com/project/loading

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

Answer 8

Variante: j'ai une icône avec id = " logo " en haut à gauche de la page principale; un spinner gif est ensuite superposé (avec une transparence) lorsque ajax fonctionne.

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

Answer 9

J'ai apporté deux modifications à la réponse d'origine .

1. À partir de jQuery 1.8, ajaxStart et ajaxStop ne devraient être associés qu'à document. Cela rend plus difficile de filtrer uniquement certaines des requêtes ajax. Soo ...
2. Passage à ajaxSend et ajaxComplete permet d’interpecter la demande ajax en cours avant d’afficher le spinner.

Voici le code après ces modifications:

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

Je souhaite également contribuer à cette réponse. Je cherchais quelque chose de similaire dans jQuery et c’est ce que j’ai fini par utiliser.

J'ai reçu mon spinner de chargement de http://ajaxload.info/ . Ma solution est basée sur cette réponse simple à l'adresse http://christierney.com / 2011/03/23 / global-ajax-loading-spinners / .

En gros, votre balisage HTML et CSS ressemblent à ceci:

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

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

Et ensuite, votre code pour jQuery ressemblerait à ceci:

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

C’est aussi simple que cela:)

Answer 11

Vous pouvez simplement attribuer une image de chargeur à la même balise sur laquelle vous allez ultérieurement charger du contenu à l'aide d'un appel Ajax:

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

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

Vous pouvez également remplacer la balise span par une balise d'image.

Answer 12

Outre la définition de valeurs par défaut globales pour les événements ajax, vous pouvez également définir le comportement d'éléments spécifiques. Peut-être que changer de classe suffirait?

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

Exemple CSS, pour masquer #myForm avec un 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;  
}

Answer 13

Notez que vous devez utiliser des appels asynchrones pour que les fileuses fonctionnent (du moins, c’est ce qui a empêché la mienne de s’afficher avant l’appel ajax, puis s’est rapidement arrêté car l’appel était terminé et a supprimé la toupie).

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

J'ai utilisé ce qui suit avec jQuery UI Dialog. (Peut-être que cela fonctionne avec d'autres callbacks ajax?)

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

Le contient un gif de chargement animé jusqu'au remplacement de son contenu à la fin de l'appel ajax.

Answer 16

C’est le meilleur moyen pour moi:

jQuery :

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

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

Café :

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

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

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

Ceci est un plugin très simple et intelligent pour ce but spécifique: https://github.com/hekigan/is-loading

Answer 19

Je fais ceci:

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

Je pense que vous avez raison. Cette méthode est trop globale ...

Cependant, c’est un bon choix par défaut lorsque votre appel AJAX n’a aucun effet sur la page elle-même. (sauvegarde de fond par exemple). (vous pouvez toujours le désactiver pour un certain appel ajax en passant " global ": false - voir la documentation à jquery

Lorsque l'appel AJAX est censé actualiser une partie de la page, j'aime bien mon & "chargement &"; les images doivent être spécifiques à la section actualisée. J'aimerais voir quelle partie est rafraîchie.

Imaginez à quel point ce serait génial si vous pouviez simplement écrire quelque chose comme:

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

Et cela montrerait un " chargement " sur cette section. Vous trouverez ci-dessous une fonction que j'ai écrite et qui gère & "; Le chargement &"; afficher également mais il est spécifique à la zone que vous rafraîchissez en ajax.

Tout d'abord, laissez-moi vous montrer comment l'utiliser

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

Et c’est la fonction - un début simple que vous pouvez améliorer à votre guise. c'est très flexible.

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

Si vous ne voulez pas écrire votre propre code, il y a aussi beaucoup de plugins qui font exactement cela:

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

Answer 22

Si vous envisagez d'utiliser un chargeur à chaque fois que vous effectuez une demande de serveur, vous pouvez utiliser le modèle suivant.

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

Ce code utilise notamment le plugin jajaxloader (que je viens de créer)

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

Answer 23

Mon code ajax ressemble à ceci. En fait, je viens de commenter async: false line et la visionneuse apparaît.

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

Je montre le spinner dans une fonction avant le code ajax:

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

Pour le langage HTML, j'ai utilisé une classe de polices awesome:

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

J'espère que cela aidera quelqu'un.

Answer 24

Vous pouvez toujours utiliser le plug-in jQuery du bloc d'interface utilisateur qui fait tout pour vous. bloque même la page de toute entrée pendant le chargement de l'ajax. Si le plug-in semble ne pas fonctionner, vous pouvez en savoir plus sur la bonne façon de l'utiliser dans cette réponse. . Découvrez-le.