Afficher un loader.gif avant exécution ajax

[siriu]

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

[captain_torche]

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

[siriu]

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

[captain_torche]

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

[siriu]

Merci Captain pour ces explications et le lien très utile