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

【问题标题】：jQuery - best way to present huge amount of scrollable datajQuery - 呈现大量可滚动数据的最佳方式
【发布时间】：2021-04-08 16:29:25
【问题描述】：

我有一个长度为 1.5k 的数组，需要显示每个条目（每个条目的 DIV 集）但是当我一次显示它时，浏览器大部分时间都会挂起。我试图找出最灵活、最简单和用户友好的方式来呈现这些数据。我所有的想法都很难实现或对用户不友好。到目前为止我的想法：

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

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

【问题讨论】：

您需要分批工作，并使用某种无限滚动机制将所有项目中的每批都渲染到屏幕上。
尝试用户体验堆栈交换：ux.stackexchange.com
@vsync，我知道我应该分部分做，但我不知道如何在 jQuery 中实现。
那么...既然您想编写目前您无能为力的事情...而且我想不出一个脚本可以完成所有工作-box...我猜你应该首先精通javascript，因为这是非常基本的东西。

标签： javascript jquery html arrays

【解决方案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 st 元素，您应该将其 convert 转换为一个真实的数组，以便此示例代码无需太多更改即可工作。

【讨论】：