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
- cliquez sur la case à cocher
- rien ne se passe pendant 2/3 secondes (traitement)
- page est mise à jour
- 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.
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
Vous devez vous connecter pour publier un commentaire.
Apparemment vous de tirer un asynchrone demande (oui, asynchrone, en d'autres termes, il ne doit pas fonctionner en synchronisation avec le code!) au cours du "long processus en cours d'exécution". Vous devez appeler
$('#loading').hide()
à la fin de la fonction de rappel de la requête asynchrone.Voici un excellent exemple:
Ce n'est évidemment pas d'aller travailler. Il le montrera, le feu d'une requête asynchrone, puis immédiatement à cacher. Vous avez besoin de réécrire le code:
OriginalL'auteur BalusC
J'ai tout essayé et je dois en conclure que c'est le produit d'un navigateur brainfart.
'setTimeout" dans ma dernière mise à jour est de forcer le navigateur tho exécuter toutes les étapes dans le bon ordre.
Elle le suce, n'est-ce pas élégant, mais au moins ça marche...
Mise à jour: le setTimeout est nécessaire parce que jquery "simplifie" la chaîne de commandes. Si je dis cela pour masquer un élément et de le montrer à nouveau, il sera tout simplement ignorer la commande parce que le résultat final sera le même que ne rien faire...
OriginalL'auteur The Disintegrator
Je pense que vous voulez faire
à l'intérieur d'une fonction de rappel pour le spectacle.
Regarder la documentation de la méthode ici: http://docs.jquery.com/Effects/show
Vous pouvez obtenir le même "instant montrant l'effet en appelant
show(0);
Mais vous voulez faire le rappel? Pas de problème, faites ceci:
Simple! 🙂
Avez-vous un exemple vivant que je pouvais jouer avec? Je suis en train de penser au lieu de changer chaque ligne, si vous avez un ensemble, vous pouvez modifier la balise tbody à la place.
OriginalL'auteur Will Morgan
Mettre un div sur votre page quelque part comme:
Puis accrochez le montrer et cacher pour ajaxStart, ajaxStop, et ajaxError événements comme:
OriginalL'auteur Brian
Juste une remarque - j'ai développé un plugin pour la création d'une superposition de div avec un chargement graphique.
OriginalL'auteur Jim
Avez-vous essayé d'utiliser ajaxStart à l'exécution de votre fonction de mise à jour?
cochez cette question: stackoverflow.com/questions/1191485/...
OriginalL'auteur Jason
Je pense que cela fonctionne correctement. Cette opération:
n'est pas vraiment lent et il est réalisé en quelques ms hauts, si vous ne voyez pas le chargement d'informations, car il est juste là pour un temps très court.
Que faire si vous commentez cacher et removeclass instructions, voyez-vous chargement div alors?
Quelque chose comme ce que vous dites? jQuery("#mostrarArticulosDeReferencia").click(function(event){ if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) { jQuery("#chargement").show(); //pas d'affichage //jQuery("#listadoArticulos tr.r").removeClass("caché"); //lent /fonctionnement/jQuery("#chargement").hide(); } else { jQuery("#chargement").show(); //pas d'affichage //jQuery("#listadoArticulos tr.r").addClass("caché"); //lent /fonctionnement/jQuery("#chargement").hide(); } }); oui, je vois le chargement de la div, mais je nerd à la cacher par la suite...
Note mentale: ne pas essayer de coller le code dans les commentaires.
OriginalL'auteur RaYell
J'ai vu ce comportement et il dépend du navigateur utilisé. IE est le plus touchés. La raison n'est pas que jQuery est lente, bien que le JavaScript s'exécute plus lentement dans IE, mais plus à cause de la prestation de la nouvelle HTML. La raison de setTimeout() aide est parce qu'il ne la première action et uniquement lorsque le navigateur est en fait rendu le HTML et la deuxième partie est fait. L'ensemble de l'opération est en fait plus lentement, mais le retour le rend plus agréable.
Une façon de prouver que c'est en se cachant le long de la table et l'exécution du même code. Il va faire la même chose, mais que la table est invisible et ne rend pas l'ensemble de l'action est beaucoup plus rapide.
Il ya un couple de façons de contourner ce problème.
OU l'accessibilité pour que la matière?
Principalement en raison de la vitesse de rendu d'une table dans le navigateur. À l'aide de balises div et css est une bonne alternative. Bien sûr, il ya la possibilité d'utiliser une table fixe-mise en page qui va vous aider. Voir: stackoverflow.com/questions/1046035/....
Ce n'est pas de mise en page. C'est un tableau de données tabulaires. Ne pouvez pas utiliser de largeur fixe parce que j'essaie d'utiliser tout l'espace disponible, et si je divise le tableau, les colonnes de différentes largeurs. À L'Aide De Firefox
OriginalL'auteur Maurice
Ce n'est pas la réponse à la question d'origine, mais est-il plus rapide d'utiliser une règle CSS pour une classe sur le tableau lui-même:
et activer /désactiver l'affichage comme ceci:
?
OriginalL'auteur Michael B
Essayez d'utiliser la fonction de rappel "complète" de la méthode show, le js est pour la plupart dans des évènements asynchrones, et ce de trois axes: l'
vont être exécutés sans attendre, donc, de votre montre, ajout de la classe et de cacher immédiatement le div, c'est pourquoi vous ne pouvez pas voir la div, vous êtes le cacher, sans attendre d'être montré et il apparaît et disparaît très vite, ou même qu'il ne peut jamais se montrer (ne sais pas, l'optimisation de ce type).
Si vous ajoutez les deux dernières à l'intérieur de la complète des rappels, il travaillera, plus http://api.jquery.com/show/:
En tout cas, également, la manière correcte de le faire pour la requête ajax (que j'imagine, va être utile pour quelqu'un) à l'aide de ajaxStart et ajaxStop comme ceci:
Plus pour removeClass absence de rappel:
Peut-être que votre problème réside sur le fait qu'il n'y a pas de rappel pour removeClass, mais vous pouvez faire la prochaine:
essayer cela aussi:
Vous pouvez ajouter le problème que si vous possédez des images ou du code supplémentaire qui s'active une fois que vous retirez la classe, il n'est pas natif de façon à attendre pour eux de cacher le div de chargement, peut-être même si vous retirez la classe caché, il n'est pas facile d'attendre pour les objets pour être visible.
Je viens de remarquer que c'était il y a 2 ans, peut-être que vous n'avez pas besoin de plus.
OriginalL'auteur Jorge E. Cardona