时间戳

首页 > 解决方案 > 添加/删除微调器 gif 到无限滚动？

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

问题描述

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

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

标签： javascriptjqueryasp.netvb.net

解决方案

Use beforeSend to display the loader and once the data is fetched, hide the loader.

HTML:

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

Script:

In the script, simply just add and remove the active class.

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

 } });

推荐阅读