Question

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

显示用户视口中的DIV（难以使其适用于所有屏幕配置）
按页面对条目进行分组并在滚动事件上切换它们（不是用户友好的 - 没有可见的滚动条）
加载更多条目＆＃34;加载更多＆＃34;被按下（不是用户友好的，用户必须在按钮上点击100次，如果他想要进入第1000个条目，它会挂起浏览器）

提供此数据的最佳方式是什么？

Answer 1

使用此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数组可能是一个javascript元素的DOM元素或一个jQuery元素，你应该convert到一个真正的数组，这个代码代码可以在没有太大变化的情况下工作。

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

1 个答案: