javascript - jQuery - 呈现大量可滚动数据的最佳方式

Question

我有一个长度为 1.5k 的数组，需要显示每个条目(每个条目的 DIV 集)，但是当我一次显示全部内容时，浏览器大多数时候都会挂起。我试图找出最灵活、最简单和用户友好的方式来呈现这些数据。我所有的想法都很难实现或者不方便用户使用。到目前为止我的想法是:

• 显示用户视口(viewport)中的 DIV(很难使其适用于所有屏幕配置)
• 按页面对条目进行分组，并在滚动事件上切换它们(不方便用户 - 没有可见的滚动条)
• 按下“加载更多”时加载更多条目(对用户不友好，如果用户想要到达第 1000 个条目，则必须单击按钮 100 次，并且无论如何都会挂起浏览器)<

呈现这些数据的最佳方式是什么？

Answer 1

更新 - 我还编写了另一个库: 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到一个真实的数组，此示例代码无需太多更改即可工作。