Повышение производительности сайта с помощью вызова AJAX

Question

У меня есть приложение, в котором я получаю информацию из базы данных с помощью вызова AJAX.Большая информация, более 500 результатов;так что это замедляет производительность.Когда вы открываете приложение, вам нужно подождать 2 минуты, нажимая что-нибудь, пока он не завершит вызов AJAX.

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
        }
    });

}

Есть ли способ улучшить производительность, возможно, загрузив всего 50, а затем, если они прокрутятзагрузить еще 50. Или у кого-нибудь есть советы, как это улучшить?

Answer 1

Да, вы можете использовать ленивую загрузку при прокрутке вниз.

//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)}})

    }
});