我正在开发一个移动页面，有一个包含大约300个项目的列表。当用户访问该页面时，这是总共300kb的数据。我已经实现了一个jquery列表视图作为复合组件，用于动态显示具有显示更多功能和任何内容的列表视图：
<cc:interface>
<cc:attribute name="items" />
</cc:interface>
<cc:implementation>
<form class="ui-filterable">
<input id="filterable-input" data-type="search" placeholder="Search track..." />
</form>
<ul id="list" data-role="listview" data-filter="true" data-inset="true" data-input="#filterable-input">
<ui:repeat id="repeater" value="#{cc.attrs.items}" var="item">
<li style="padding: 0 10px">
<cc:insertChildren/>
</li>
</ui:repeat>
</ul>
<input type="button" value="Show more" />
</cc:implementation>
我想做的是，减少第一次渲染，比如说减少到50个项目。如果用户点击show more，那么接下来的50个元素应该从服务器获取并呈现，而不需要再次加载旧元素。
jquery有一个无限滚动的例子：Jquery无限scrool
但它们只使用常量表达式来添加元素。在我的情况下，我想添加cc:insertChildren，其中的内容无关紧要，可以动态选择。
在我的Bean中，我有一个包含所有元素的列表。另一个想法是，使用ui的size属性：repeat。但要改变这一点，我必须更新我的ui：repeat组件，这样所有元素都会再次下载。因此，通过简单的数学计算，下载的总大小将是50kb+100kb+150kb+200kb+。。。
最后，我想有一个解决方案，在所有滚动之后，从服务器下载的总大小等于开始渲染所有项目时的大小。
我制作了一个非常简单的解决方案，使用基于滚动的加载。尽管还有一个小问题(不是真正的问题，而是一个棘手的破解)，我想把这个解决方案提供给其他人。
Javascript等待外部ajax请求
我正在使用primefaces dataTable并滥用内置的分页：)