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

    }
});

通过AJAX调用提高网站性能

1 个答案: