通過 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)}})

    }
});