Comment montrer spinner chargement en jQuery?
Dans Prototype je peux montrer un "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 attacher une broche de chargement à cette commande comme je l'ai fait dans Prototype?
24 réponses
il y a plusieurs façons. Ma façon préférée est d'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 s'allument à chaque fois que vous faites un appel Ajax.
Update : à partir de jQuery 1.8, la documentation stipule que .ajaxStart/Stop ne doit être joint qu'à document . Cela transformerait l'extrait ci-dessus en:
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
Pour jQuery je utiliser
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});
vous pouvez simplement utiliser la fonction .ajax de jQuery et utiliser son option beforeSend et définir une fonction dans laquelle vous pouvez montrer quelque chose comme une div de chargeur et sur l'option de succès vous pouvez cacher que 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 de Gif tournant. Voici un site web qui est un grand générateur de chargeur AJAX selon votre schéma de couleur: http://ajaxload.info /
vous pouvez insérer l'image animée dans le DOM juste avant L'appel AJAX, et faire une fonction inline pour la supprimer...
$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
$("#myDiv").html('');
});
cela vous permettra de vous assurer que votre animation démarre à la même image sur les requêtes suivantes (si cela compte). Notez que les anciennes versions de IE pourraient avoir des difficultés avec l'animation.
bonne chance!
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}
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'
});
utilisez le plugin de chargement: http://plugins.jquery.com/project/loading
$.loading.onAjax({img:'loading.gif'});
variante: j'ai une icône avec id = "logo" en haut à gauche de la page principale; un gif spinner est ensuite superposé sur le dessus (avec transparence) quand ajax fonctionne.
jQuery.ajaxSetup({
beforeSend: function() {
$('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
},
complete: function(){
$('#logo').css('background', 'none')
},
success: function() {}
});
j'ai fini avec deux changements à la réponse originale .
- à partir de jQuery 1.8, ajaxStart et ajaxStop ne doivent être attachés qu'à
document. Cela rend plus difficile de filtrer seulement quelques requêtes ajax. Soo...
La commutation - en ajaxSend et ajaxComplete permet d'interspecter la requête ajax actuelle avant de montrer le spinner.
C'est le code après ces changements:
$(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();
})
je veux aussi contribuer à cette réponse. Je cherchais quelque chose de similaire à jQuery et c'est ce que j'ai finalement fini par utiliser.
j'ai eu ma vrille de chargement de http://ajaxload.info / . Ma solution est basée sur cette réponse simple à http://christierney.com/2011/03/23/global-ajax-loading-spinners / .
fondamentalement votre markup HTML et CSS ressemblerait à ceci:
<style>
#ajaxSpinnerImage {
display: none;
}
</style>
<div id="ajaxSpinnerContainer">
<img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>
et puis vous codez pour jQuery ressemblerait à quelque chose comme 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:)
vous pouvez simplement assigner une image de chargeur à la même étiquette sur laquelle vous chargerez plus tard du contenu en utilisant un appel Ajax:
$("#message").html('<span>Loading...</span>');
$('#message').load('index.php?pg=ajaxFlashcard');
vous pouvez également remplacer l'étiquette de portée par une étiquette d'image.
en plus de définir des valeurs par défaut globales pour les événements ajax, vous pouvez définir le comportement pour des éléments spécifiques. Peut-être qu'il suffirait de changer de classe?
$('#myForm').ajaxSend( function() {
$(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
$(this).removeClass('loading');
});
exemple CSS, pour cacher #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;
}
$('#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>');
}
});
j'ai utilisé ce qui suit avec jQuery UI Dialog. (Peut-être que ça marche avec d'autres appels ajax?)
$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
height: 300,
width: 600,
title: 'Wait for it...'
});
contient un GIF de chargement animé jusqu'à ce que son contenu soit remplacé lorsque l'appel ajax est terminé.
C'est la meilleure façon pour moi:
jQuery :
$(document).ajaxStart(function() {
$(".loading").show();
});
$(document).ajaxStop(function() {
$(".loading").hide();
});
café :
$(document).ajaxStart ->
$(".loading").show()
$(document).ajaxStop ->
$(".loading").hide()
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; }
notez que vous devez utiliser des appels asynchrones pour que les spinners fonctionnent (du moins c'est ce qui a fait que le mien ne s'est pas manifesté avant après l'appel ajax et s'est ensuite rapidement éteint car l'appel avait terminé et enlevé le spinner).
$.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
}
});
c'est un plugin très simple et intelligent pour ce but spécifique: https://github.com/hekigan/is-loading
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);
}
});
je pense que vous avez raison. Cette méthode est trop globale...
cependant - c'est un bon défaut pour quand votre appel AJAX n'a aucun effet sur la page elle-même. (enregistrement en arrière-plan par exemple). (vous pouvez toujours l'éteindre pour un certain appel ajax en passant "global":false-voir la documentation à jquery
quand L'appel AJAX est destiné à rafraîchir une partie de la page, j'aime que mes images de "chargement" soient spécifiques au rafraîchissement section. Je voudrais voir quelle partie est rafraîchie.
imaginez comme ce serait cool si vous pouviez simplement écrire quelque chose comme:
$("#component_to_refresh").ajax( { ... } );
et cela indiquerait un" chargement " sur cette section. Ci-dessous est une fonction que j'ai écrit qui gère "chargement" l'affichage ainsi, mais il est spécifique à la zone que vous rafraîchissez en ajax.
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 voici le la fonction de base que vous pouvez améliorer comme vous le souhaitez. il 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);
};
si vous ne voulez pas écrire votre propre code, il y a aussi beaucoup de plugins qui font exactement cela:
si vous prévoyez d'utiliser un chargeur à chaque fois que vous faites une requête serveur, vous pouvez utiliser le motif 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)
vous pouvez toujours utiliser Block UI jQuery plugin qui fait tout pour vous, et il bloque même la page de n'importe quelle entrée pendant que l'ajax charge. Dans le cas où le plugin ne semble pas fonctionner, vous pouvez lire sur la bonne façon de l'utiliser dans cette réponse. regardez ça.
mon code ajax ressemble à ceci, en effet, je viens de commenter async: false line et le spinner 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 Html, j'ai utilisé une classe de police impressionnante:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
J'espère que ça aidera quelqu'un.