Improve Website Performance with AJAX call

Question

I have an app where I'm pulling information from the database via AJAX call. The information that is pulling is big, more than 500 results; so this slows down the performance. When you open the app you have to wait for 2 minutes with our clicking anything until it finishes the AJAX call.

function redemptionRewards(locationID) {
    var date1 = dateStart
    var date2 = dateEnd

    let success = function (res) {
        let redemptionsCoinsRewards1 = res['redemptionsCoinsRewards1']

        for (i = 0; i < redemptionsCoinsRewards1.length; i++) {

            let type1 = redemptionsCoinsRewards1[i]['type']
            if (type1 != null) {
                let typeCapital1 = type1.charAt(0).toUpperCase() + type1.slice(1)

                let timeCR1 = redemptionsCoinsRewards1[i]['date']
                let locationCR1 = redemptionsCoinsRewards1[i]['location']
                let firstName1 = redemptionsCoinsRewards1[i]['name']
                let lastName1 = redemptionsCoinsRewards1[i]['lastname']


                $('#redeemptionsTable1 tbody').append(`             
              <tr class='redempTableRows'>
              <td class='redemption'>${typeCapital1} </td>
              <td class='redemption-location'>${locationCR1} </td>
              <td class='redemption-user'> ${firstName1} ${lastName1} </td>
        </tr>`)
            }
        }
    }

    $.ajax({
        type: 'POST',
        url: '/api/redemptionsCoinsRewards1',
        crossDomain: true,
        success: success,
        dataType: 'json',
        data: {
            locationID: locationID,
            date1: date1,
            date2: date2
        }
    });
}

Is there a way to improve the performance, maybe loading just 50 and then if they scroll down load another 50. Or does anyone have any advice on how to improve this?

Answer 1

Yes you can use lazy loading while scrolling down.

//makeAjaxcall in page load
$.ajax({url:"url",function(d){console.log(d)}})
$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           //make another ajax call with next 50 items.
           // ajax call get data from server and append to the div
           $.ajax({url:"newurl",function(d){console.log(d)}})

    }
});