Отображение анимации загрузки во время вызова ajax

Question

Мой DIV не отображается, когда выполняется вызов ajax. Я пытался:

• document.getElementById("loading").style.display = "inline-block"
• $("#loading").show()
• $("#loading").css("display", "block")
• $("#loading").toggle(200)

Но ни один из них не работает.

Вот мой HTML:

<div id="datatablesButtons" class="btncustom-group-body">
    <button class="btncustom pill" title="Create a new filter" tabindex="0" aria-controls="dataTables" id="addFilterButton" type="button" onclick="addFilter()">Add filter <i class="far fa-plus-square"></i></button>
    <button class="btncustom pill" title="Compute events unfiltered" tabindex="0" aria-controls="dataTables" id="buttonEventsUnfiltered" type="button" onclick="computeEventsNotImpacted()"><i class="fas fa-bolt"></i></button>
    <span class="btncustom pill" id="placeholderEventsUnfiltered" >... unfiltered event(s)</span>
    <div class="load-3" id="loading" style="display: inline-block;">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>

CSS:

.line {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background-color: #4b9cdb;
}

.load-3 {margin-top: -2px; position: absolute;}
.load-3 .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite;}
.load-3 .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite;}
.load-3 .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite;}

@keyframes loadingC {
    0 {transform: translate(0,0);}
    50% {transform: translate(0,15px);}
    100% {transform: translate(0,0);}
}

JS:

$(document).ready(function() {
    document.getElementById("loading").style.display = "none";
    drawTable();
});

function computeEventsNotImpacted() {
    document.getElementById("loading").style.display = "inline-block";
    dataSelectedRows = currentTable.rows({selected: true}).data();

    $.ajax({
        url: restURI,
        type: 'POST',
        data: JSON.stringify(listEventsUnfiltered),
        cache: false,
        contentType: false,
        processData: false,
        async: false,
        success: function(eventsNotImpacted) {
            eventsUnfiltered = eventsNotImpacted[0].EVENTS_UNFILTERED;
        },
        error: function (jqXHR, exception) {
            if (globalVars.unloaded) {
                return;
            }
            manageAjaxError(jqXHR, textStatus, errorThrown);
        }
    });
    $("#placeholderEventsUnfiltered").text(eventsUnfiltered + " event(s) unfiltered");
    document.getElementById("loading").style.display = "none";
}

Iувидеть анимацию, если я использую Google DevTools построчно в режиме отладки. Но это не так, когда я запускаю его без отладки.

Answer 1

Ваш div анимированного загрузчика не работает, потому что ваш ajax-вызов async:false,

, поэтому async:false занимает весь экран (и, следовательно, блокирует браузер) - поэтому ваш div не получает загружено , для решения этой проблемы:

вам необходимо создать вызов ajax с помощью async:true

, как показано ниже:

 $.ajax({
        url: restURI,
        type: 'POST',
        data: JSON.stringify(listEventsUnfiltered),
        cache: false,
        contentType: false,
        processData: false,
        async: true,
        success: function(eventsNotImpacted) {
            //Success code
        },
        error: function (jqXHR, exception) {
            //Error Code
        }
    });