我有一个长度为 1.5k 的数组,需要显示每个条目(每个条目的 DIV 集),但是当我一次显示全部内容时,浏览器大多数时候都会挂起。我试图找出最灵活、最简单和用户友好的方式来呈现这些数据。我所有的想法都很难实现或者不方便用户使用。到目前为止我的想法是:
- 显示用户视口(viewport)中的 DIV(很难使其适用于所有屏幕配置)
- 按页面对条目进行分组,并在滚动事件上切换它们(不方便用户 - 没有可见的滚动条)
- 按下“加载更多”时加载更多条目(对用户不友好,如果用户想要到达第 1000 个条目,则必须单击按钮 100 次,并且无论如何都会挂起浏览器)<
呈现这些数据的最佳方式是什么?
最佳答案
更新 - 我还编写了另一个库: https://github.com/yairEO/infinite
使用这个endless scrolling脚本,你可以这样做:
var items = [], // array of objects to load on scroll
batchCount = 10;
// load more items
function showMore(howMany){
// remove X amount of items from the total hidden item's jQuery object and show them
var toLoad = items.splice(0, howMany), // from the items array, cut only the batch we need to show
i;
// Make sure that an image in the current batch is loaded before adding it to the DOM
for( i=toLoad.length; i--; ){
// show item toLoad[i]
batchCount--;
}
}
function onScrollEnd(){
if( batchCount <= 0 && items.length ){
// load 10 items on every scroll
batchCount = 10;
showMore(batchCount);
}
}
$(window).endless({offset:'20%', callback: onScrollEnd });
您的 items
数组可以是 DOM 元素的 javascript 数组或 jQuery 元素数组,您应该 convert到一个真实的数组,此示例代码无需太多更改即可工作。
关于javascript - jQuery - 呈现大量可滚动数据的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23595334/