Hiển thị danh sách lớn trong HTML

Question

Có thư viện javascript tải một danh sách khổng lồ một cách hiệu quả bằng cách chỉ tải phần có thể xem của danh sách đó và giả mạo thanh cuộn không?

<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 Documents làm ví dụ này cho tài liệu văn bản lớn.

Lưu ý: Điều tôi đang tìm kiếm phức tạp hơn cuộn vô hạn. Cuộn vô hạn chỉ đợi bạn nhấn đáy và nó sẽ tải thêm dữ liệu, mở rộng thanh cuộn. Những gì tôi đang tìm kiếm sẽ làm cho bạn nghĩ rằng tất cả dữ liệu đã được tải vì thanh cuộn được giả mạo. Khi bạn nhấn đáy, bạn đã thực sự nhấn vào cuối danh sách mà tôi muốn hiển thị.

Answer 1

Cân nhắc Clusterize.js

Plugin này thực hiện chính xác những gì bạn yêu cầu .

Answer 2

Đó là một kỹ thuật được gọi là "cuộn vô hạn" và nhiều thư viện hỗ trợ nó. Nếu bạn đang sử dụng jQuery, hãy xem tại địa chỉ:

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

Như bạn đã biết, ý tưởng này là để xác định "bao nhiêu" của dữ liệu người dùng có thể hiện thấy, và sau đó thực hiện một yêu cầu cho chỉ có nhiều, nhưng đặt cuộn liên quan đến kích thước của toàn bộ tập hợp. Bằng cách đó, khi người dùng cuộn qua một điểm nhất định, bạn có thể yêu cầu phần tiếp theo của tập dữ liệu.

ExtJS cũng có điều này như là một phần của khuôn khổ dựa trên thành phần của chúng. Đây là a grid example.

Answer 3

Bạn đã thử thuộc tính tràn trong css chưa? Chỉ cần cung cấp cho div vùng chứa của bạn chiều rộng và chiều cao chuẩn như sau:

#container {height: 500px; chiều rộng: 500px; overflow: auto;}

Answer 4

bài này đề cập đến câu hỏi của bạn và trình bày câu trả lời - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

Không phải là kẻ giết người cắm bạn sau nhưng đi một chặng đường dài để giải thích làm thế nào bạn sẽ đi về việc tạo chính nó.

UPDATE: Có một thư viện mới mang tên infinity.js, thông tin thêm ở đây - https://stackoverflow.com/a/12108015/921259

Answer 5

Tôi chạy vào một vấn đề tương tự. Kịch bản là tôi đã có một (~ 400 + yếu tố) lớn được hiển thị trong danh sách, trong đó mỗi phần tử có thể có chế độ xem riêng. Việc tạo, bố cục và vẽ của DOM cho các phần tử đó chậm hơn mức cần thiết khi tryign để hiển thị toàn bộ danh sách bên trong DIV cuộn.

Tôi đã xem xét một số giải pháp.

InfinityJS [1] khá gần với những gì tôi muốn, ngoại trừ yêu cầu phần tử chứa các mục danh sách đã được thêm vào DOM.

vô hạn cuộn [2] bởi Paul Irish cũng thú vị, nhưng đã giải quyết được một vấn đề cụ thể khác với những gì tôi cần giải quyết.

MegaList [3] đến gần với những gì tôi muốn. Andrew (tác giả) đã thực hiện một công việc tuyệt vời để thiết kế nó cho di động đầu tiên, với sự hỗ trợ cảm ứng, v.v.Một báo trước cho tôi là dường như giả định một mô hình danh sách lựa chọn nghiêm ngặt và làm nhiều hơn một chút so với tôi muốn một thành phần danh sách thực hiện (ví dụ: ràng buộc để thay đổi kích thước các sự kiện và cố gắng xử lý tự động).

Vì vậy, tôi bắt đầu viết một thành phần danh sách khung hình được mô hình hóa yếu sau phiên bản UITableView của iOS - và được gọi là khung nhìn js-virtual-list (vlv :-). Đó là một công việc đang diễn ra và tôi sẽ không khuyên bạn nên làm điều đó ở trên trừ khi bạn có những nhu cầu tương tự mà không được đáp ứng đầy đủ với những điều đó.

Nguồn đang ở đây https://github.com/shyam-habarakada/js-virtual-list-view.

đóng góp cần thiết :-)

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

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

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

Answer 6

Bạn có thể xem xét sử dụng số <iron-list> của Polymer thực sự tiêu thụ tất cả dữ liệu nhưng chỉ gắn một số nút vào DOM và xử lý ràng buộc dữ liệu để hiển thị đúng nội dung khi người dùng cuộn qua.

Tôi đã sử dụng nó trước đây và có kết quả rất tốt với danh sách tùy chỉnh gồm 2000 mục (các mục đó là các thành phần tùy chỉnh phức tạp) cuộn liền mạch.

Mặc dù tôi chưa thử bản thân mình, nhóm Polymer tuyên bố rằng nó có thể dễ dàng trộn lẫn với các khung công tác khác.

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