как запросить и получить только частичные данные из JSON с помощью JQuery AJAX

Question

Как получить только частичные данные из API на стороне клиента и сделать так, чтобы другие данные отображались только с прокруткой вниз.

$(document).ready(function  () {
            var out = "";
            $.ajax({
                type: 'GET',
                url: 'myapi url',
                dataType: 'json',
                success: function (data) {
                    var books = data.books;
                    console.log(books);
                    var out = "";
                    var i;
                    for(i=0;i < books.length;i++){
                        out +="<div class='test'>"+"<div>"+books[i].id+"</div>"+"<div>"+books[i].title+"</div>"+"</div>";
                    }
                    document.getElementById("content").innerHTML = out;
                },
                error: function (error) {
                    alert(error);
                }
            });
        });

Например: у меня 20 данных, сначала нужно запросить и получить только 10 данныхи остальные данные должны выбираться только после прокрутки вниз.

html:

<div id="demo">
        <ul id="content" class="list">

        </ul>
    </div>