Muestra eficientemente una lista grande en HTML

Question

¿Hay una biblioteca de JavaScript que cargue eficientemente una lista gigante cargando solo la parte visible de esa lista y simulando la barra de desplazamiento?

<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 Docs, por ejemplo, hace esto para documentos de texto grandes.

Nota: Lo que estoy buscando es más complejo que el desplazamiento infinito. El desplazamiento infinito solo espera que toque el fondo y cargará más datos, ampliando la barra de desplazamiento. Lo que estoy buscando te hará pensar que todos los datos se han cargado porque las barras de desplazamiento son falsas. Cuando tocas el fondo, en realidad llegas al final de la lista que quiero mostrar.

Answer 1

Considere Clusterize.js

Este plugin hace exactamente lo que pide .

Answer 2

Es una técnica llamada "desplazamiento infinito", y varias bibliotecas lo admiten. Si estás usando jQuery, echar un vistazo a:

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

Como saben, la idea es determinar "cuánto" del conjunto de datos, el usuario puede ver la corriente, y luego realizar una solicitud de solo tanto, pero configure el desplazamiento en relación con el tamaño del conjunto completo. De esta forma, una vez que el usuario se desplaza más allá de cierto punto, puede solicitar la siguiente parte del conjunto de datos.

ExtJS también tiene esto como parte de su marco basado en componentes. Aquí está a grid example.

Answer 3

¿Has probado el atributo de desbordamiento en css? Simplemente déle a su contenedor div un ancho y alto estándar así:

#container {height: 500px; ancho: 500px; overflow: auto;}

Answer 4

Este puesto cubre su pregunta y presenta respuestas - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

no es el asesino plugin que está buscando, pero va un largo camino para explicar cómo va a ir sobre la creación usted mismo

UPDATE: Hay una nueva biblioteca llamada infinity.js, más información aquí - https://stackoverflow.com/a/12108015/921259

Answer 5

me encontré con un problema similar. El escenario era que ya tenía un gran (~ 400 + elementos) para mostrar en una lista, donde cada elemento puede tener su propia vista. La creación, el diseño y la pintura del DOM para esos elementos fue más lento de lo que necesitaba al intentar renderizar toda la lista dentro de un DIV de desplazamiento.

Miré varias soluciones.

InfinityJS [1] estaba bastante cerca de lo que quería, excepto que requería que el elemento que contiene los elementos de la lista ya se haya agregado al DOM.

infinite-scroll [2] por Paul Irish también fue interesante, pero estaba resolviendo un problema específico que era diferente de lo que necesitaba resolver.

MegaList [3] estuvo más cerca de lo que quería. Andrew (autor) hizo un gran trabajo al diseñarlo para dispositivos móviles primero, con soporte táctil, etc.Una advertencia para mí fue que parece asumir un modelo de lista de selección estricta y hace un poco más de lo que me gustaría que hiciera un componente de la lista (por ejemplo, vinculante para cambiar el tamaño de los eventos y tratar de manejarlos automáticamente).

Así que comencé a escribir un componente de la lista barebones modelado moderadamente después de la UITableView de iOS - y llamado es el js-virtual-list-view (vlv :-). Es un trabajo en progreso y no lo recomendaría sobre lo anterior a menos que tenga necesidades similares que no se satisfacen con eso.

Las fuentes están aquí https://github.com/shyam-habarakada/js-virtual-list-view.

colaboradores necesarios :-)

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

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

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

Answer 6

Puede usar Polymer's <iron-list> que en realidad consume todos los datos, pero solo conecta un puñado de nodos al DOM y maneja el enlace de datos para mostrar el contenido correcto mientras el usuario se desplaza.

Lo he usado antes y obtuve muy buenos resultados con listas personalizadas de más de 2000 elementos (también son elementos personalizados complejos) que se desplazan sin problemas.

Aunque no lo he probado, el equipo de Polymer afirma que se puede combinar fácilmente con otros frameworks.

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