将微调器 gif 添加/删除到无限滚动？

Posted 2023-05-08

【中文标题】将微调器 gif 添加/删除到无限滚动？

【英文标题】：Add/remove spinner gif to infinite scroll?

【发布时间】：2020-07-05 10:17:52

【问题描述】：

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

$.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”，然后在所有数据（实际上是图像）显示后再次隐藏它？

【参考方案1】：

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

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


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

【讨论】：

另外，内容实际上每次包含大约15张jpg图片，相当大。如果我完整地从微调器中删除活动类：function() 在图像显示之前还会有很长的延迟吗？换句话说，一旦图像全部显示，我应该使用不同的事件来隐藏它吗？

而不是“成功调用”，而是在 complete: function().. 如果它不满足您的期望，您需要在那里实现一些延迟加载机制。

【参考方案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");  ); 

  );

【讨论】：

谢谢。

不是真的，只需将其设为静态 html div 否则您将不得不从后端获取它并进行额外调用。所以最好只制作一个静态 html 并根据需要隐藏和显示它。

哦，是的，我明白了。我可以将它直接放在 dvGridItems01 div 之后的 div 中，因此它总是被推下页面。谢谢。

乐于助人:)

另外一件事，内容实际上每次包含大约15张jpg图片，相当大。如果我成功从微调器中删除活动类：函数（msg），在图像显示之前还会有很长的延迟吗？换句话说，一旦图像全部显示，我应该使用不同的事件来隐藏它吗？