顯示加載 div animation 而 ajax 調用

Question

執行 ajax 調用時，我的 DIV 不顯示。 我試過了：

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

如果我在調試模式下逐行使用 Google DevTools，我會看到 animation。 但是當我在沒有調試的情況下運行它時它不會。

Answer 1

您的 Animated Loader div 不起作用，因為您的 ajax 調用是async:false ，

所以async:false占據了整個屏幕（因此阻止了瀏覽器）——這就是為什么你的 div 沒有被加載，來解決這個問題：

您需要使用async:true創建您的 ajax 調用

如下所示：

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