Effizient große Liste in HTML anzeigen

Question

Gibt es eine JavaScript-Bibliothek, die eine riesige Liste effizient lädt, indem sie nur den sichtbaren Teil der Liste lädt und die Bildlaufleiste vortäuscht?

<div id='container'> 
    <!-- Empty but height is set to take up space to fake scrollbar --> 
    <div id='hidden-before'></div>  

    <!-- Preloaded in case the user scrolls up --> 
    <div id='preload-before'></div> 

    <!-- User can see this. Height == #container's height --> 
    <div id='viewable-section'></div> 

    <!-- Preloaded in case the user scrolls down --> 
    <div id='preload-after'></div> 

    <!-- Empty but height is set to take up space to fake scrollbar --> 
    <div id='hidden-after'></div>  
</div> 

Google Text & Tabellen zum Beispiel tut dies für große Textdokumente.

Hinweis: Was ich suche, ist komplexer als unendlich scroll. Unendlich scroll wartet nur darauf, dass du den Boden erreichst und es wird mehr Daten laden, wodurch die Bildlaufleiste vergrößert wird. Nach was ich suche, lässt Sie denken, dass alle Daten geladen worden sind, weil die Scrollbalken gefälscht sind. Wenn Sie unten angekommen sind, haben Sie tatsächlich das Ende der Liste erreicht, die ich zeigen möchte.

Answer 1

Clusterize.js

Dieses Plugin Betrachten Sie tut genau das, was Sie fragen .

Answer 2

Es ist eine Technik namens "Infinite Scroll", und mehrere Bibliotheken unterstützen es. Wenn Sie jQuery verwenden, werfen Sie einen Blick auf:

http://www.infinite-scroll.com/

Wie Sie wissen, ist die Idee, um zu bestimmen, „wie viel“ des Datensatzes kann der Anwender aktuell und dann einen Antrag auf ausführen nur so viel, aber legen Sie die Rolle in Bezug auf die Größe des gesamten Satzes. Auf diese Weise können Sie, sobald der Benutzer an einem bestimmten Punkt vorbei scrollt, den nächsten Teil des Datensatzes anfordern.

ExtJS hat dies auch als Teil ihres komponentenbasierten Frameworks. Hier ist a grid example.

Answer 3

Haben Sie das Überlauf-Attribut in CSS versucht? Geben Sie Ihrem Container einfach eine Standardbreite und -höhe:

#container {Höhe: 500px; Breite: 500px; Überlauf: auto;}

Answer 4

Dieser Beitrag deckt Ihre Frage und präsentiert Antworten - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

nicht der Mörder ist Plugin Sie nach, sondern geht einen langen Weg zu erklären, wie Sie gehen über das Erstellen es selbst.

UPDATE: Es gibt eine neue Bibliothek infinity.js genannt, weitere Infos hier - https://stackoverflow.com/a/12108015/921259

Answer 5

ich in ein ähnliches Problem lief. Das Szenario war, dass ich bereits eine große (~ 400 + Elemente) in einer Liste angezeigt haben, wo jedes Element seine eigene Ansicht haben kann. Die Erstellung, das Layout und das Zeichnen des DOM für diese Elemente war langsamer als ich benötigte, wenn ich versuchte, die gesamte Liste in einem scrollenden DIV zu rendern.

Ich sah mehrere Lösungen.

InfinityJS [1] war ziemlich nah an dem, was ich wollte, außer dass das Element mit den Listenelementen bereits zum DOM hinzugefügt werden musste.

infinite-scroll [2] von Paul Irish war auch interessant, aber löste ein spezifisches Problem, das anders als das war, was ich lösen musste.

MegaList [3] kam dem am nächsten, was ich wollte. Andrew (Autor) hat einen tollen Job gemacht, es zuerst für Mobilgeräte zu entwickeln, mit Touch-Unterstützung usw.Eine Einschränkung für mich war, dass es scheint, ein strenges Auswahllistenmodell anzunehmen und tut ein bisschen mehr, als ich eine Listenkomponente tun möchte (z. B. eine Bindung, um Ereignisse zu skalieren und zu versuchen, dies automatisch zu handhaben).

Also fing ich an, eine Barebones-Listenkomponente zu schreiben, die locker nach dem iOS UITableView modelliert wurde - und hieß js-virtual-list-view (vlv :-). Es ist ein work in progress und ich würde es nicht weiter empfehlen, es sei denn, Sie haben ähnliche Bedürfnisse, die nicht ganz mit denen übereinstimmen.

Quellen sind hier https://github.com/shyam-habarakada/js-virtual-list-view.

benötigt Mitwirkende :-)

[1] http://airbnb.github.io/infinity/

[2] http://www.infinite-scroll.com/

[3] https://github.com/triceam/MegaList

Answer 6

Sie können die Verwendung von Polymers <iron-list> betrachten, die tatsächlich alle Daten verbraucht, aber nur eine Handvoll Knoten an das DOM anfügt und die Datenbindung verarbeitet, um den richtigen Inhalt anzuzeigen, während der Benutzer scrollt.

Ich habe es zuvor verwendet und sehr gute Ergebnisse mit benutzerdefinierten Listen von 2000 + Elemente (die Elemente sind komplexe benutzerdefinierte Elemente zu) scrollen nahtlos.

Obwohl ich es selbst nicht versucht habe, behauptet das Polymer-Team, dass es leicht mit anderen Gerüsten gemischt werden kann.

https://www.webcomponents.org/element/PolymerElements/iron-list