큰 목록을 HTML로 효율적으로 표시

Question

목록의 가시 부분을로드하고 스크롤바를 위조하여 거대한 목록을 효율적으로로드하는 자바 스크립트 라이브러리가 있습니까?

<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 문서 도구는 대용량 텍스트 문서에 대해이를 수행합니다.

참고 : 내가 찾고있는 것은 무한 스크롤보다 더 복잡합니다. Infinite 스크롤은 사용자가 아래를 칠 때까지 기다리지 만 더 많은 데이터를로드하여 스크롤 막대를 확대합니다. 내가 찾고있는 것은 스크롤바가 가짜이기 때문에 모든 데이터가로드되었다고 생각하게 할 것이다. 당신이 바닥에 닿았을 때, 당신은 실제로 내가 보여주고 싶은 목록의 끝을 쳤습니다.

Answer 1

:-) 필요 .

Answer 2

"무한 스크롤"이라는 기술이며 여러 라이브러리가이를 지원합니다. 사용자가 현재 볼 수있는 "얼마나"데이터 세트의 결정

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

아시다시피, 아이디어는 다음 에 대한 요청을 수행 : 당신이 jQuery를 사용하는 경우를 살펴 오직 그만큼,하지만 전체 세트의 크기와 관련하여 스크롤을 설정하십시오. 이렇게하면 사용자가 특정 지점을지나 스크롤하면 데이터 세트의 다음 부분을 요청할 수 있습니다.

ExtJS는 또한 구성 요소 기반 프레임 워크의 일부로 이것을 가지고 있습니다. 여기에 a grid example이 있습니다.

Answer 3

CSS에서 오버플로 속성을 사용해 보셨습니까? 다음과 같이 컨테이너 div에 표준 폭과 높이를 지정하십시오.

#container {height : 500px; 너비 : 500px; 오버플로 : 자동;}

Answer 4

이 게시물 질문을 다루고과 답변 제공 - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

당신이 후있어 플러그인 살인자가 아니라 당신이 만드는 방법에 대해 갈 것입니다 방법을 설명에 먼 길을 간다 너 자신.

UPDATE : infinity.js라는 새로운 라이브러리, 여기에 대한 추가 정보를 원하시면있다 - https://stackoverflow.com/a/12108015/921259

Answer 5

나는 비슷한 문제로 도망가. 시나리오는 이미 목록에 표시 할 큰 (~ 400 + 요소)가 있었는데 각 요소는 자체보기를 가질 수 있습니다. 스크롤링 DIV 내부에서 전체 목록을 렌더링하려고 할 때 필 요한 것보다 해당 요소에 대한 DOM의 작성, 레이아웃 및 페인팅이 느 렸습니다.

몇 가지 해결책을 살펴 보았습니다.

InfinityJS [1]은 목록 항목이 포함 된 요소가 이미 DOM에 추가되어야한다는 점을 제외하고는 원하는 바에 가깝게되었습니다.

Paul Irish의 무한 - 스크롤 [2]도 재미 있었지만 해결해야 할 문제와 다른 특정 문제를 해결했습니다.

메가리스트 [3] 내가 원한 것에 가장 가깝습니다. Andrew (작성자)는 터치 지원 등으로 모바일 용으로 먼저 디자인하는 작업을 훌륭하게 수행했습니다.나에게 한가지주의 할 점은 엄격한 선택 목록 모델을 사용하는 것으로 보이며 목록 구성 요소 (예 : 이벤트 크기를 조정하고 자동으로 처리하려고 시도하는 바인딩)보다 조금 더 많은 작업을 수행한다는 것입니다.

그래서 iOS UITableView를 모델로 만든 베어 본 목록 구성 요소를 작성하기 시작했습니다. js-virtual-list-view (vlv :-)입니다. 진행중인 작업이며 비슷한 요구 사항이없는 경우를 제외하고는 위의 권장 사항을 권장하지 않습니다. .

참여자는이 플러그인은 당신이 무엇을 물어 정확히 수행 Clusterize.js

고려

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

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

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

Answer 6

실제로 모든 데이터를 소비하는 Polymer의 <iron-list>을 사용하여 살펴볼 수 있지만 소수의 노드 만 DOM에 연결하고 데이터 바인딩을 처리하여 사용자가 스크롤 할 때 올바른 콘텐츠를 표시합니다.

이전에 사용 해본 적이 있고 2000 개 이상의 항목 (복잡한 맞춤 요소이기도 한 항목)의 맞춤 목록을 사용하여 매우 좋은 결과를 얻었습니다.

직접 시도하지는 않았지만 Polymer 팀에서는 다른 프레임 워크와 쉽게 섞을 수 있다고 주장합니다.

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