将微调器 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 中，直到没有更多要获取的项目。

如何在获取数据时临时显示一个包含动画旋转器.gif 的 div“dvSpinnerContainer”，然后在所有数据（实际上是图像）显示后再次隐藏它？

Answer 1

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

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


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

Answer 2

使用beforeSend 显示加载器，获取数据后隐藏加载器。

HTML：

<div id="loader"><img src="loader.png"></div>

脚本：

在脚本中，只需添加和删除活动类。

$.ajax( { 
    type: "POST",
    url: "default.aspx/fGetData", 
    data: varData,
    contentType: "application/json; charset=utf-8", 
    dataType: "json",
    async: "true",
    cache: "false",
    beforeSend: function(){
        $('#loader').addClass('active'); // =====> add active class on loader
    }
    success: function (msg) {
        $('#loader').removeClass('active'); // =====> remove active class from loader

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

 } });