将 «Load More» 添加到使用来自 Google 电子表格的 $.getJSON 接收的数据输出中

Question

在使用 Google 电子表格作为“后端”时，我使用 jQuerys $.getJSON(...) 通过 Google 的 JSON 输出 (https://spreadsheets.google.com/feeds/list/MySpreadsheetID/1/public/values?alt=json) 获取电子表格的数据，处理数据（将值添加到数组中）并通过数组循环将数据/内容添加到前端。

现在假设 Google 电子表格有大约 200 行和大约 10 列（大量数据）填充了数据。我正在使用这些数据在前端创建信息卡（每行 = 一张卡，200 行 = 200 张卡……）。这对于«首次加载»时的浏览器来说显然是相当多的工作。

如何添加«Load More»-Routine，以在构建前端时降低浏览器负载/-work？

目标是加载完整的 JSON，但仅先将 X 行（= X 卡）的数据添加到前端，并且仅当用户单击 «Load More» 元素时才加载接下来的 X 行，然后在第二次单击时加载接下来的 X 行，依此类推，直到构建所有行/卡片。

我的简化代码（获取所有行并在第一次加载时创建所有卡片）：

var rowCount,
    row1 = [],
    row2 = [],
    row3 = [],
        $cardsContainer = $('.js-cardsContainer');

function processDataGoogle(data) {
    rowCount = Object.keys(data.feed.entry).length;

    for(var i in data.feed.entry) {
        row1.push("" + data.feed.entry[i].gsx$row1.$t);
        row2.push("" + data.feed.entry[i].gsx$row2.$t);
        row3.push("" + data.feed.entry[i].gsx$row3.$t);
    }

}

function addCards() {
    for(var index = 0; index < rowCount; index++) {
        $cardsContainer.append($('<article class="card"><h1>'+row1[index]+'</h1><p>'+row2[index]+'</p><a href="#">'+row3[index]+'</a></article>'));
    }
}

$(document).ready(function() {

    $.getJSON('https://spreadsheets.google.com/feeds/list/MySpreadsheetID/1/public/values?alt=json', function(data) {
        processDataGoogle(data);
        addCards();
    });

});

Answer 1

我们可以更改addCards()，只在点击Load More 时加载项目：

var loadMoreClicks = 1;

function addCards() {

var CARDS_TO_LOAD = 10; // number of cards to load once load more is clicked.
    for(var index = (CARDS_TO_LOAD * (loadMoreClicks - 1 )); index < (CARDS_TO_LOAD * loadMoreClicks); index++) {
        $('.js-cardsContainer').append($('<article class="card"><h1>'+row1[index]+'</h1><p>'+row2[index]+'</p><a href="#">'+row3[index]+'</a></article>'));
    }
}

$("#load-more").click(function(){
        loadMoreClicks += 1;
        addCards();    
});

在 HTML 中：

<button id="load-more">Load More</button>

注意：加载所有项目后需要处理。