Добавить / удалить GIF Spinner для бесконечной прокрутки?

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

        } });

В основном, дополнительные данные (.p HTML) добавляются в div с именем dvGridItems01 каждый раз, когда пользователь прокручивает вниз до тех пор, пока не останется больше предметов для поиска.

Как я могу временно показать div "dvSpinnerContainer", содержащий animated-spinner.gif, когда данные выбираются, а затем скрыть его снова, как только все данные (фактически изображения) отображаются?

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

 } });