Comment montrer le chargement spinner en jQuery?
Dans Prototype je peux montrer un "chargement..." de l'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 dois-je joindre un chargement spinner pour cette commande que j'ai fait dans le Prototype?
- Si vous souhaitez afficher un spinner alors que des images sont en cours de chargement, vous pouvez utiliser mon plugin jQuery waitForImages.
- c'est une bonne méthode - blog.oio.de/2010/11/08/...
- Voir cette excellente réponse à une question similaire: stackoverflow.com/a/1964871/456584
- double possible de jQuery "Veuillez Patienter, Chargement en cours..." animation?
Vous devez vous connecter pour publier un commentaire.
Il ya un couple de façons. Mon préféré consiste à associer une fonction à la ajaxStart/Stop événements sur l'élément lui-même.
La ajaxStart/fonctions d'Arrêt se déclenche lorsque vous effectuez des appels Ajax.
Mise à jour: Comme de jQuery 1.8, la documentation indique que les
.ajaxStart/Stop
ne doit être attaché àdocument
. Cela aurait pour effet de transformer l'extrait ci-dessus à:.ajaxStart(function(e) { CallFunctionWithTargettedElement(e.currentTarget); })
va appeler une fonction dont l'argument est l'élément qui a déclenché l'appel ajax. Notez que ceci est juste un exemple avec pas de manipulation pour si l'ajax a été appelé à partir d'un script sans un gestionnaire d'événement ou de toute autre vérification d'erreur que ce soit. Il s'agit simplement de montrer qu'il existe des moyens de contrôler le positionnement. La fonction appelée peut placer une absolue élément sur l'élément appelant.Pour jQuery je utiliser
beforeSend
est appelée avant chaque appel, alors queajaxStart
est déclenché uniquement lorsque la premier ajax méthode est appelée. De même pourajaxStop
, il est appelé lorsque le dernier appel ajax finitions. Si vous avez plus d'une requête simultanées, l'extrait de code dans cette réponse ne fonctionnent pas correctement.Vous pouvez simplement utiliser le jQuery
.ajax
fonction et l'utiliser à son grébeforeSend
et de définir une fonction dans laquelle vous pouvez afficher quelque chose comme un chargeur de div et sur le succès de l'option, vous pouvez masquer le loader div.Vous pouvez avoir toute la Filature image Gif. Voici un site web qui est un grand AJAX Loader Générateur selon votre schéma de couleur: http://ajaxload.info/
success
ne sera pas appelé si il y a une erreur, mais "vous recevrez toujours unecomplete
de rappel, même pour des requêtes synchrones", selon jQuery Ajax Événements.Vous pouvez insérer l'image animée dans les DOM juste avant l'appel AJAX, et de faire une fonction en ligne de l'enlever...
Ce sera assurez-vous que votre animation démarre à la même image sur les demandes ultérieures (si ce qui compte). Notez que les anciennes versions d'IE pourrait ont des difficultés avec l'animation.
Bonne chance!
http://docs.jquery.com/Ajax/load#urldatacallback
Si vous utilisez
$.ajax()
vous pouvez utiliser quelque chose comme ceci:Utiliser le chargement du plugin: http://plugins.jquery.com/project/loading
Variante: j'ai une icône avec un id="logo" en haut à gauche de la page principale; un compteur gif est ensuite recouvert sur le dessus (avec transparence) lors de l'ajax fonctionne.
J'ai fini avec deux changements à la réplique originale.
document
. Cela rend plus difficile pour filtrer seulement une partie de la requête ajax. Soo...C'est le code après ces changements:
ajaxComplete
semble incendie prématurément lors des demandes de réessayer, j'ai donc utilisé une combinaison deajaxSend
etajaxStop
et il fonctionne très bien.J'ai aussi envie de contribuer à cette réponse. Je cherchais quelque chose de semblable en jQuery et ce que j'ai fini par l'utiliser.
J'ai obtenu mon chargement spinner de http://ajaxload.info/. Ma solution est sur cette simple réponse à http://christierney.com/2011/03/23/global-ajax-loading-spinners/.
Fondamentalement votre balisage HTML et CSS devrait ressembler à ceci:
Et puis vous code jQuery ressemblerait à quelque chose comme ceci:
C'est aussi simple que ça 🙂
Vous pouvez tout simplement créer une image de chargement à la même étiquette sur laquelle vous permettra de charger du contenu à l'aide d'un appel Ajax:
Vous pouvez également remplacer la balise span avec une balise d'image.
Ainsi que le réglage de valeurs globales par défaut pour l'ajax d'événements, vous pouvez définir le comportement d'éléments spécifiques. Peut-être simplement de changer leur classe serait suffisant?
Exemple CSS, pour masquer #myForm avec un spinner:
.loading > * { display:none; }
très intelligent grâceNotez que vous devez utiliser des appels asynchrones pour les filateurs de travail (au moins, c'est ce qui a causé mine de ne pas montrer qu'après l'appel ajax puis rapidement s'en alla que l'appel avait fini et retiré de la toupie).
J'ai utilisé le suivant avec jQuery UI Dialog. (Ça marche peut-être avec d'autres rappels ajax?)
Qui contient une animation gif de chargement jusqu'à ce que son contenu est remplacé lors de l'appel ajax est terminée.
C'est la meilleure façon pour moi:
jQuery:
Café:
Docs: ajaxStart, ajaxStop
JavaScript
CSS
C'est très simple et intelligent plugin pour un but spécifique:
https://github.com/hekigan/is-loading
Je fais ceci:
Je pense que vous avez raison.
Cette méthode est trop global...
Cependant - c'est un bon comportement par défaut lorsque votre appel AJAX n'a aucun effet sur la page elle-même. (enregistrement en arrière-plan par exemple). ( vous pouvez toujours éteindre pendant un certain appel ajax en passant "global":faux - consulter la documentation à jquery
Lors de l'appel AJAX est destiné à remplacer une partie de la page, j'aime mon "chargement" des images spécifiques à la nouvelle section. Je voudrais voir la pièce qui est actualisé.
Imaginer comment ce serais sympa si vous pouviez simplement écrire quelque chose comme :
Et ce serait montrer un "chargement" sur cette section.
Ci-dessous est une fonction que j'ai écrit qui gère "chargement" afficher en tant que bien, mais c'est spécifique à la zone que vous rafraîchissant en ajax.
Tout d'abord, permettez-moi de vous montrer comment l'utiliser
Et c'est la fonction de base que vous pouvez améliorer comme vous le souhaitez. il est très flexible.
Si vous ne voulez pas écrire votre propre code, il y a aussi beaucoup de plugins qui font ça:
Si vous prévoyez d'utiliser un chargeur à chaque fois que vous faites une demande de serveur, vous pouvez utiliser le modèle suivant.
Ce code, en particulier, utilise le jajaxloader plugin (que je viens de créer)
https://github.com/lingtalfi/JAjaxLoader/
Mon code ajax ressemble à ça, en effet, j'ai juste commenté async: false ligne et le compteur affiche.
Je suis en train de montrer de la toupie au sein d'une fonction avant de l'ajax code:
Pour le Html, j'ai utilisé une police génial classe:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
Espère que cela aide quelqu'un.
Vous pouvez toujours utiliser Bloc d'INTERFACE utilisateur jQuery plugin qui fait tout pour vous, et il bloque même la page de l'entrée alors que l'ajax est en cours de chargement. Dans le cas où le plugin semble pas fonctionner, vous pouvez lire au sujet de la bonne façon de l'utiliser dans cette réponse. Vérifier.