Aller au contenu

Afficher un loader.gif avant exécution ajax


siriu

Sujets conseillés

Bonjour,

J'utilises un peu de jQuery / Ajax sur un site avec des fonctions de ce type


function addCategory(){

$.ajax({
type: "POST",
url: "../../ajax_category.php",
cache: false,
data : 'action=detail',
success: function(msg){
document.getElementById('centre').innerHTML = msg;
}
});
}

Quel est la meilleur façon de faire pour afficher pendant 2/3 secondes une images loader.gif avant l'affichage dans la div "centre" ?

Merci d'avance pour votre aide

Lien vers le commentaire
Partager sur d’autres sites

Personnellement, je procède de la manière suivante :

- Avant l'appel AJAX, je vide le conteneur et je lui attribue une classe "loading".

- Dans mon fichier CSS, j'attribue une hauteur fixe et une image de fond (le gif en question) centrée à cette classe

- Dans la fonction success, je supprime la classe et j'ajoute le résultat au conteneur

Soit dit en passant, c'est dommage de faire côtoyer jQuery et des horreurs comme innerHTML(). Pour mémoire, innerHTML n'affecte pas le DOM : il est donc impossible de manipuler quoi que ce soit qui aurait été créé via cette fonction ultérieurement en JavaScript.

Donc, plutôt que d'utiliser ça :

document.getElementById('centre').innerHTML = msg;

Je ne saurais que te conseiller de faire ça :

$('#centre').append(msg);

Lien vers le commentaire
Partager sur d’autres sites

merci pour la réponse, je visualise bien la démarche, mais aurais tu un exemple avec un bout de code afin que je vois la syntaxe à utiliser, je dois me former très prochainement à jQuery mais pour le moment je ne le connais pas encore :blush:

Lien vers le commentaire
Partager sur d’autres sites

On vide le conteneur et on lui applique une classe "loading" :

$('#conteneur').empty().addClass('loading');

Suppression de la classe "loading" :

$('#conteneur').removeClass('loading');

Pour plus d'infos sur les fonctions de jQuery, j'ai toujours ce document sous la main : jQuery 1.4.2 visual Cheat Sheet

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...