有效地显示HTML中的大列表 [英] Efficiently showing large list in HTML

问题描述

有没有一个JavaScript库可以通过加载该列表的可见部分并伪造滚动条来有效加载巨型列表？

 < div id ='container'> 
 <！ - 空但高度设置为占用假滚动条的空间 - > 
< div id ='hidden-before'>< / div> 
 
 <！ - 预装用户向上滚动 - > 
< div id ='preload-before'>< / div> 
 
<！ - 用户可以看到这个。高度==＃容器的高度 - > 
< div id ='viewable-section'>< / div> 
 
 <！ - 预装用户向下滚动 - > 
< div id ='preload-after'>< / div> 
 
 <！ - 空，但高度设置为占用虚假滚动条的空间 - > 
< div id ='hidden-after'>< / div> 
< / div> 
  

Google文档例如可以处理大型文本文档。

注意：我所寻找的比无限滚动更复杂。无限滚动只是等待您触及底部，它将加载更多数据，放大滚动条。我正在寻找的东西会让你认为所有的数据都被加载了，因为滚动条是伪造的。当你触及底部时，实际上已经到达了我想要显示的列表的末尾。 解决方案

考虑 Clusterize.js

这个插件完全符合你的要求。

Is there a javascript library that efficiently loads a giant list by only loading the viewable part of that list and faking the scrollbar?

<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 for example does this for large text documents.

Note: What I am looking for is more complex than infinite scroll. Infinite scroll just waits for you to hit the bottom and it will load more data, enlarging the scrollbar. What I'm looking for will make you think all the data has been loaded because the scrollbars are faked. When you hit the bottom, you've actually hit the end of the list I want to show.

解决方案

Consider Clusterize.js

This plugin does exactly what you ask.

这篇关于有效地显示HTML中的大列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！