Jquery hide () et show () s'exécutent trop lentement dans google chrome

J'ai une application web qui ne fonctionne pas correctement dans le navigateur chrome. Fonctionne parfaitement sous Firefox. J'ai une page avec un grand dénombrement des éléments de liste, 316, pour être exact. Chaque élément de la liste contient une grande quantité de HTML. Mon problème est quand je veux pour masquer ou afficher ces éléments de la liste.

J'ai une page de test sur jsFiddle pour montrer le problème que je vais avoir. J'ai démonté le code HTML de la page pour une liste non ordonnée de tenir tous les 316 éléments de la liste. J'ai deux boutons que simplement appeler jQuery masquer ou afficher lorsque l'utilisateur clique dessus. De nouveau, cela va vite dans Firefox, Opéra, même c'est à dire, assez bien dans Safari mais dans Google Chrome, il peut prendre plus de 30 secondes, ce qui ouvre la fenêtre de dialogue vous demandant si vous voulez tuer la page car un script est en cours d'exécution à long terme.

Voici le lien pour le jsFiddle

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

merci pour toute entrée.
jmm

source d'informationauteur jmm

11

Ressemble à ceci n'a rien à voir avec jQuery est juste un problème avec Chrome masquer un élément parent qui a un grand nombre d'enfants des éléments.

Ce n'utilise le code javascript de base pour masquer l'élément sur le document prêt:
```
document.getElementById('sortable-lines').style.display="none";
```
Et il prend toujours pour toujours d'après le document est prêt.

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

Ouvert un Chrome bug pour cela: http://code.google.com/p/chromium/issues/detail?id=71305
9

Lorsque le masquage, la suppression de l'élément du DOM est plus rapide que l'utilisation hide().
```
var sortableLines = $('#sortable-lines');
$('#hide').click(function() {
    $('#timer').text("Hiding");        
    sortableLines.remove();
});
```
Il est encore lent lorsque vous append() de retour vers les DOM.

Une solution possible est de montrer les premiers 10 ou si des éléments quand le bouton est cliqué, puis setInterval progressivement leur montrer.

Edit: Trouvé un autre hack:

Vous devez placer le récipient à overflow: hidden:
```
#linecontainer { overflow: hidden; }
```
Lorsque le masquage, déplacer l'élément à jour en haut, par la mise en margin-top à un grand nombre négatif.
```
$('#hide').click(function() {
    $('#timer').text("Hiding");
    sortableLines.css('margin-top', '-1000000px');
});
```
Lors de la démonstration, réinitialiser son margin-top.
```
$('#show').click(function() {
    $('#timer').text("Showing");
    sortableLines.css('margin-top', '0');
});
```
Et il affiche et masque instantanément.
0

Merci pour la réponse ci-dessus, il fonctionne très bien et accélère le processus.

Il n'est pas, cependant, toujours du travail Fonctionne bien quand les éléments que j'ai besoin sont en haut de la liste. Cependant, il ne indique pas toutes si je de choisir quelque chose à partir du milieu de la liste.

Je crois que je sais pourquoi il se comporte mal.

Lorsque la valeur d'une longue liste d'éléments est configuré pour masquer/afficher les éléments cachés sont retirés de la circulation et placé sur le bas de la page dans l'ordre où ils ont été enlevés.

Cela permet d'enlever les éléments remarquablement rapide.

Cependant, en essayant de rendre à nouveau visible, est une douleur sur le rendu que chrome a se souvenir de l'ordre dans lequel ces éléments appartiennent et apparemment pour recalculer les valeurs associées.

Autres que la plupart des autres navigateurs le spot pour le composant n'est pas perdu donc pas de temps est gaspillé dans ce tri inutile. La réponse ci-dessus fonctionne remarquablement bien car cela évite de google Chrome dérèglement problème.

Vous devez vous connecter pour publier un commentaire.