Эффективное отображение большого списка в HTML

Ответ 1

Рассмотрим Clusterize.js

Этот плагин выполняет именно то, что вы просите.

Ответ 2

Это техника под названием "бесконечная прокрутка", и ее поддерживают несколько библиотек. Если вы используете jQuery, посмотрите:

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

Как вы знаете, идея состоит в том, чтобы определить "сколько" набора данных, который пользователь может видеть в текущий момент, а затем выполнить запрос только для этого, но установите прокрутку по отношению к размеру всего набора. Таким образом, как только пользователь прокручивается мимо определенной точки, вы можете запросить следующую часть набора данных.

ExtJS также имеет это как часть их основанной на компонентах структуры. Здесь пример сетки.

Ответ 3

У меня возникла аналогичная проблема. Сценарий состоял в том, что у меня уже было большое (~ 400 + элементов), которое должно отображаться в списке, где каждый элемент может иметь собственный вид. Создание, компоновка и покраска DOM для этих элементов были медленнее, чем мне нужно, когда tryign отображал весь список внутри прокручиваемого DIV.

Я рассмотрел несколько решений.

InfinityJS [1] был близок к тому, что я хотел, за исключением того, что элемент, содержащий элементы списка, уже был добавлен в DOM.

бесконечный прокрутка [2] Paul Irish также был интересен, но решал конкретную проблему, которая отличалась от того, что мне нужно было решить.

MegaList [3] оказался ближе всего к тому, что я хотел. Эндрю (автор) проделал большую работу по его разработке для мобильных устройств с сенсорной поддержкой и т.д. Одно из предостережений для меня состояло в том, что он, кажется, принимает строгую модель списка выбора и делает немного больше, чем мне нужен компонент списка (например, привязка к событиям изменения размера и попытка автоматически обрабатывать это).

Итак, я начал писать компонент списка barebones, который был losely, смоделированный после iOS UITableView, и называется js-virtual-list-view (vlv:-). Это незавершенное производство, и я бы не рекомендовал его выше, если у вас нет аналогичных потребностей, которые не совсем удовлетворены.

Источники здесь https://github.com/shyam-habarakada/js-virtual-list-view.

Необходимые участники: -)

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

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

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

Ответ 4

Вы пробовали атрибут переполнения в css? Просто дайте контейнеру div стандартную ширину и высоту:

 #container {height: 500px; ширина: 500 пикселей; переполнение: авто;}

Ответ 5

Этот пост содержит ваш вопрос и представляет ответы - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

Не плагин-убийца, который вам нужен, но дает длинный путь для объяснения того, как вы собираетесь создавать его самостоятельно.

UPDATE: появилась новая библиотека под названием infinity.js, более подробная информация здесь - fooobar.com/questions/325330/...

Ответ 6

Вы можете посмотреть на использование Polymer <iron-list>, который фактически потребляет все данные, но он прикрепляет только несколько узлов к DOM и обрабатывает привязку данных для отображения правильного содержимого по мере прокрутки пользователя.

Я использовал его раньше и получил очень хорошие результаты с пользовательскими списками из более чем 2000 элементов (эти элементы также являются сложными пользовательскими элементами), прокручивая их без проблем.

Хотя я и не пробовал это, команда Polymer утверждает, что ее можно легко смешивать с другими платформами.

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

Ответ 7

Одновременное отображение большого списка в HTML сделает загрузку вашей страницы более медленной, чем при использовании нумерации страниц или бесконечной прокрутки. Если вы используете нумерацию страниц для управления отображаемым контентом, это было бы идеально, потому что это может избежать снижения производительности прокрутки браузера.

И настоящая проблема в том, когда вы хотите использовать бесконечную прокрутку вместо нумерации страниц. Даже если вы установите display:none; или visibility:hidden; для каждого элемента, который не был виден в окне просмотра, у вас будет некоторая задержка, потому что каждый элемент все еще пересчитывается при прокрутке списка.

Чтобы избежать пересчета, каждый элемент должен быть перемещен в Virtual DOM, чтобы он никогда не отображался, а для некоторого свойства (например, высота/ширина) по умолчанию будет 0.

Есть некоторая библиотека, которая может обрабатывать виртуальную прокрутку, такую как Clusterize, ngx-ui-scroll, hyperlist и т.д.

Но некоторые из них не поддерживают динамическую высоту строки, некоторые из них не имеют лицензии MIT, а некоторые имеют небольшую функцию для манипулирования списком контента. Поэтому я решил создать библиотеку MVW, которая может обрабатывать динамическую высоту строки, как в этом примере. И да, он может использовать scrollTo(index) для автоматической прокрутки к выбранному индексу.

Реализация так же, как

<div sf-controller="large-list">
  <ul class="sf-virtual-scroll">

    <li sf-repeat-this="x in list">
      {{x.id}}
    </li>

  </ul>
</div>

sf.model.for('large-list', function(self){
  self.list = [];

  for(var i = 0; i < 1000; i++){
    self.list.push({id:i});
  }
});

Вы можете управлять отображаемым списком с помощью функции массива по умолчанию, такой как push, splice, pop.

Или попробуйте здесь