JQuery Show "Chargement" pendant une opération lente

J'ai aussi vu ce comportement et cela dépend du navigateur utilisé. C'est-à-dire que celui est le plus touché. La raison n'est pas que JQuery est lent, bien que le JavaScript fonctionne plus lentement dans IE, mais plus en raison du rendu du nouveau HTML. La raison pour laquelle Settimeout () aide, c'est parce qu'elle fait la première action et uniquement lorsque le navigateur est effectué rendant le nouveau HTML, la deuxième partie est effectuée. L'opération entière est effectivement plus lente, mais la rétroaction le rend plus agréable.

Un moyen de démontrer cela consiste à cacher la table longue et à exécuter le même code. Il fera de même mais que la table est invisible et ne rendra pas la totalité de l'action globale.

Il y a quelques façons de se déplacer.

1. Essayez d'éviter les tables et d'aller pour une disposition DIV à la place. Les tables rendent lentement et en fonction du navigateur, la table peut ne devenir visible que complètement.
2. Si vous devez utiliser la table, envisagez d'utiliser plusieurs tables de SOIT 100 rangées bloquées ensemble. De cette façon, la page commence à rendu dès que la première table a été reformatée.
3. Si une grande table est la seule façon d'aller et que vous savez que l'utilisateur ne peut voir que les lignes supérieures que vous pouvez effectuer l'action deux fois, la première fois sur les lignes supérieures et la deuxième fois sur toutes les lignes. C'est la solution la plus lente et la moins optimale, mais peut être très facile à mettre en œuvre en ajoutant un filtre JQuery à l'action.

J'ai tout essayé et je dois conclure que c'est le produit d'un Browser Brainfart.

1. jQuery indique au navigateur d'afficher / masquer le chargement DIV
2. jQuery indique au navigateur d'ajouter / supprimer la classe cachée des lignes
3. jQuery indique au navigateur d'afficher / masquer le chargement DIV
4. Le navigateur fait toutes les étapes ci-dessus dans le mauvais ordre (2 en premier lieu)

   'Settimeout' dans ma dernière mise à jour est forçant le navigateur Tho exécuter toutes les étapes du bon ordre. Ça suce, n'est pas élégant, mais au moins ça marche ...

   Mise à jour: le Settimeout est nécessaire car JQuery "simplifie" la chaîne de commandes. Si je le dis de cacher un élément et que le spectre à nouveau, cela ignorera simplement la commande car le résultat final sera le même que rien ...

Cela ne répond pas à la question initiale, mais est-il plus rapide d'utiliser une règle CSS pour une classe sur la table elle-même: xxx

et bascule l'affichage comme suit: xxx

?

Apparemment, vous tirez une demande asynchrone forte> asynchrone (oui, asynchrone em>, en d'autres termes, il ne fonctionne pas en Sync avec le code!) Pendant le "long processus d'exécution ". Vous devez appeler $ ('# chargement'). Masquer () code> à la fin de la fonction de rappel de la demande asynchrone.

Voici un excellent exemple: P>

$('#loading').show();
$.getJSON('someURL', function(data) {
    // Do slow processing.
    $('#loading').hide();
});

Juste une note - j'ai développé un Plugin pour créer une superposition div avec un graphique de chargement dedans.

Mettez une DIV sur votre page quelque part comme si: XXX PRE>

puis raccrochez le spectacle et masquer les événements AJAXSTOP, AJAXSTOP et AJAXError, comme: P>

$("#spinner").bind("ajaxSend", function() { $(this).show(); })
$("#spinner").bind("ajaxStop", function() { $(this).hide(); })
$("#spinner").bind("ajaxError", function() { $(this).hide(); });

Essayez d'utiliser le rappel "Terminé" de la méthode Afficher, JS est principalement basé sur des événements ASYNC, et ces trois lignes:

var els = jQuery("#listadoArticulos tr.r");
els.each(function(i, el) {
  if (i == 0) jQuery("#loading").show();
  el.removeClass("hidden");
  if (els.length == i +1) jQuery("#loading").hide();
});