Arbeite für die Live-Filterung von über 1500 Objekten mit jQuery in Chrome

8

Ich werde vom Chrome / Webkit-Bug 71305 gebissen, bei dem Das Verbergen einer großen Anzahl von Knoten führt dazu, dass Chrome nicht mehr reagiert. (Tritt auch in Safari auf.)

Ich filtere ein Listenelement, das in einem Dropdown-Menü enthalten ist:

%Vor%

Schnipsel des Markups:

%Vor%

Die Zeit, die für die Ausführung des Javascript benötigt wird, ist vernachlässigbar. Wenn Chrome nach dem Löschen des Texts in input die Elemente neu zeichnen muss, hängt es. Nicht in FF6 / IE7-9.

Ich habe ein JSFiddle erstellt, um das Problem zu veranschaulichen: Ссылка

Gibt es einen anderen Ansatz, den ich verfolgen kann, anstatt die Elemente zu verstecken und zu zeigen, die Chrome nicht zum Aufhängen bringen? Ich habe versucht, die ul zu klonen, im Klon zu verarbeiten und die ul im DOM vollständig durch den Klon zu ersetzen, aber ich hoffe, es gibt einen besseren Weg, da dieser im IE wesentlich langsamer ist.

    
Soliah 30.08.2011, 05:56
quelle

2 Antworten

7

Haben Sie andere CSS-Möglichkeiten ausprobiert, um die Elemente zu verstecken?

Verwenden von CSS-Requisiten wie ein Schalter von visibility ? Oder ein Wechsel zwischen height:auto und height:0;overflow-y:hidden; ?

Ich habe ein kleines Beispiel hier gemacht, es benutzt .css({"visibility":"visible","height":"auto"}); zum Anzeigen und ({"visibility":"hidden","height":"0"}) zum Ausblenden. Und es scheint in den wenigen Tests, die ich gemacht habe, gut in Chrom zu funktionieren.

BEARBEITEN: Noch besser hier , du musst nur .css("visibility","visible"); und% co_de verwenden %. Die Verwendung von .css("visibility","hidden"); macht die Höhenmodifikation für Sie.

    
Py. 30.08.2011, 06:48
quelle
-1

Nun können Sie einen leeren Wert auf <li> element setzen. Das ist nur das Problem, ich konnte arbeiten. Und wenn Sie Wert wieder benötigen, legen Sie es zurück. Oder Sie können <li> entfernen. Aber ich bevorzuge das, um AJAX zu benutzen.

    
Ernestas Stankevičius 30.08.2011 06:48
quelle