javascript - link - ul html

Mostrando eficientemente una gran lista en HTML

Question

¿Hay una biblioteca de javascript que carga eficientemente una lista gigante cargando solo la parte visible de esa lista y falsificando 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 busco es más complejo que el desplazamiento infinito. El desplazamiento infinito solo espera que llegues a la parte inferior y cargará más datos, ampliando la barra de desplazamiento. Lo que busco te hará pensar que todos los datos se han cargado porque las barras de desplazamiento están falsificadas. Cuando llegas al final, realmente has llegado al final de la lista que quiero mostrar.

Answer 1

¿Has probado el atributo de desbordamiento en css? Solo dale a tu div contenedor una anchura y altura estándar así:

#container {altura: 500px; ancho: 500px; desbordamiento: auto;}

Answer 2

Considere Clusterize.js

Este plugin hace exactamente lo que pides.

Answer 3

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

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

Como usted sabe, la idea es determinar "cuánto" del conjunto de datos que el usuario puede ver actualmente, y luego realizar una solicitud por solo eso, pero establecer el desplazamiento en relación con el tamaño de todo el conjunto. De esa manera, 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í hay un ejemplo de cuadrícula .

Answer 4

Esta publicación cubre su pregunta y presenta respuestas: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

No es el complemento asesino el que está buscando, pero va un largo camino para explicar cómo podría crearlo usted mismo.

ACTUALIZACIÓN: hay una nueva biblioteca llamada infinity.js, más información aquí - https://.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 cuando intenté renderizar la lista completa dentro de un DIV en desplazamiento.

Miré varias soluciones.

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

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

MegaList [3] se acercó más a lo que quería. Andrew (autor) ha hecho un gran trabajo diseñándolo 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 un componente de lista hacer (por ejemplo, vincular para cambiar el tamaño de los eventos y tratar de manejar eso automáticamente).

Así que empecé a escribir un componente de la lista de barebones modelado después del iOS UITableView, y se llama js-virtual-list-view (vlv :-). Es un trabajo en progreso y no lo recomendaría por encima de lo anterior a menos que tenga necesidades similares que no se cumplan con ellas.

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

Se necesitan colaboradores :-)

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

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

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

Answer 6

Puede considerar el uso de la <iron-list> Polymer, que en realidad consume todos los datos, pero solo adjunta un puñado de nodos al DOM y maneja el enlace de datos para mostrar el contenido correcto a medida que el usuario se desplaza.

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

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

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