jQuery show “chargement en cours” au cours lent opération

J'essaie de montrer un petit chargement de l'image au cours d'une opération lente avec jQuery et ne peut pas obtenir ce droit.
C'est une GRANDE table avec des milliers de lignes. Quand je coche "mostrarArticulosDeReferencia la case à cocher" il enlève le "caché" de la classe à partir de ces lignes. Cette opération ne prend que quelques secondes et je veux donner de la rétroaction.
"chargement" est un div avec un petit gif animé

Voici le code complet

jQuery(document).ready(function() {
jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
        jQuery("#loading").show(); //not showing
        jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
        jQuery("#loading").hide();
    } else {
        jQuery("#loading").show();  //not showing
        jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
        jQuery("#loading").hide();
    }
});
jQuery("#loading").hide();
});

Il ressemble à jquery est "l'optimisation" de ces 3 lignes

        jQuery("#loading").show(); //not showing
        jQuery("#listadoArticulos tr.r").removeClass("hidden");
        jQuery("#loading").hide();

Et ne montre jamais le chargement de la div.
Des Idées?

Bonus: Il y a un moyen plus rapide de le faire afficher/masquer la chose? Découvert que la bascule est beaucoup plus lent.

Mise à JOUR:
J'ai essayé ce

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
            jQuery("#loading").show(); //not showing
            jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
            setTimeout("jQuery('#loading').hide()", 1000);
    } else {
            jQuery("#loading").show();  //not showing
            jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
            setTimeout("jQuery('#loading').hide()", 1000);
    }
});

C'est ce que je reçois

  1. cliquez sur la case à cocher
  2. rien ne se passe pendant 2/3 secondes (traitement)
  3. page est mise à jour
  4. chargement div s'affiche pendant une fraction de seconde

Mise à JOUR 2:
J'ai une solution qui fonctionne. Mais POURQUOI je dois utiliser setTimeout pour le faire fonctionner au-delà de moi...

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
    if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
            jQuery("#loading").show();
            setTimeout("jQuery('#listadoArticulos tr.r').removeClass('hidden');", 1);
            setTimeout("jQuery('#loading').hide()", 1);
    } else {
            jQuery("#loading").show();
            setTimeout("jQuery('#listadoArticulos tr.r').addClass('hidden');", 1);
            setTimeout("jQuery('#loading').hide()", 1);
    }
});

Mise à JOUR 3:
Viens de trouver une meilleure solution pour ce cas particulier.

//mostrar u ocultar articulos de referencia
$("#mostrarArticulosDeReferencia").click(function(event){
    if( $("#mostrarArticulosDeReferencia").attr("checked") )
        $("tr.r").css({'display':'table-row'});
    else
        $("tr.r").css({'display':'none'});
});

À l'aide .css ({"display": "none"}) s'avère être de MANIÈRE plus rapide que hide(), donc pas besoin pour l'animation de chargement...
Cet article m'a montré la lumière: afficher/masquer la performance.

Voulez-vous faire lors du chargement de la page? $(document).prêt() se déclenche lorsque tout est en bas et chargés
Pas besoin, j'ai besoin de ce cours de l'afficher/masquer l'opération. Juste collé le script en entier
Juste une pensée, avez-vous essayé d'utiliser les contextes? Si vous fournissez un deuxième argument en votre sélecteur de déclaration, ce qui peut aider à accélérer.

OriginalL'auteur The Disintegrator | 2009-08-10