Question

使用Google Spreadsheets作为«Backend»时，我通过Googles JSON-Output（https://spreadsheets.google.com/feeds/list/MySpreadsheetID/1/public/values?alt=json）使用jQuerys $ .getJSON（...）获取电子表格的数据，处理数据（将值添加到数组中）并通过数组循环将数据/内容添加到前端。

现在让我们假设Google Spreadsheet有大约200行和大约10列（大量数据）填充数据。我正在使用这些数据在前端创建信息卡（每行=一张卡，200行= 200张卡......）。对于“首次加载”的浏览器来说，这显然有些工作。

如何在构建前端时添加“加载更多”-Routine以降低浏览器加载/工作量？

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

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

?wsdl

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>

注意：加载所有商品后需要处理。

将“加载更多”添加到使用Google电子表格中的$ .getJSON接收的数据输出中

1 个答案: