javascript - 添加/删除旋转 gif 无限滚动？

Question

我有以下代码来在用户向下滚动时添加更多数据:

$.ajax(
        { type: "POST",
        url: "default.aspx/fGetData", 
        data: varData,
        contentType: "application/json; charset=utf-8", 
        dataType: "json",
        async: "true",
        cache: "false",
        success: function (msg) {
            var myRes = JSON.parse(msg.d);
            $("#ctl00_ContentPlaceHolder1_dvGridItems01").append(myRes.pHTML);
            document.getElementById("ctl00_ContentPlaceHolder1_HiddenFieldAJAXSortLetter").value = myRes.strHiddenFieldAJAXSortLetter;
            document.getElementById('ctl00_ContentPlaceHolder1_HiddenFieldAJAXIsProcessing').value='0';
         },
        Error: function (x, e) { alert("Network error"); } }); 

        } });

基本上，每次用户向下滚动时，都会将更多数据 (.pHTML) 添加到名为 dvGridItems01 的 div 中，直到没有更多项目可供获取。

如何在获取数据时暂时显示包含animated-spinner.gif的div“dvSpinnerContainer”，然后在显示所有数据(实际上是图像)后再次隐藏它？

Answer 1

您可以使用 ajax beforeSend 和 complete 事件来显示微调器。

beforeSend: function() {
    // add/show loader code here
},


complete: function() {
    // remove/hide loader code here
},