通过Ajax调用为列表项（ul，li）加载更多按钮

Question

如何使用ajax创建“加载更多”按钮来加载更多列表项？

我的列表类似于此问题中使用的列表：jQuery load first 3 elements, click "load more" to display next 5 elements

这就是我的样子：

product-list.liquid（自定义 Shopify 代码）

<ul id="product-container">

{% for product in collections.all.products = 1 %}

<li>

<a href="{{ product.url }}" class="product">
<img src="{{ product.featured_image.src }}" alt="{{ product.featured_image.alt }}" class="image-border-style" width="500" height="500">
</a>

</li>

{% endfor %}

</ul>

<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

我使用“{％for product in ...％}”功能来创建列表项而无需手动设置所有项及其属性。我不得不放弃手动设置以包含自动更改项目属性的特殊Shopify代码。

在theme.liquid中，我有 javascript ：

<script>
$(document).ready(function () {
    // Load the first 5 list items from another HTML file
    //$('#product-container').load('externalList.html li:lt(5)');
    $('#product-container li:lt(5)').show();
    $('#showLess').hide();
    var items =  50;
    var shown =  5;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('#product-container li:visible').size()+5;
        if(shown< items) {$('#product-container li:lt('+shown+')').show();}
        if(shown= items) {$('#loadMore').hide();}

    });
    $('#showLess').click(function () {
        $('#product-container li').not(':lt(5)').hide();
        $('#loadMore').show();
        $('#showLess').hide();
    });
});
</script>

我想做什么

我当前的javascript只显示/隐藏列表项，但我想加载它们类似于Facebook新闻源和谷歌图像 - 不是自动加载，而是加载“加载更多”按钮。

例如，要加载前5到10个列表项，然后在按下“加载更多”按钮后再加载5到10个项目。

目的

该功能的目的是通过仅加载特定数量的列表项来增加网站的初始加载速度，并按需加载更多。

如何使用ajax创建“加载更多”按钮来加载更多列表项？