当我的nw.js应用程序读取csv文件时，如何添加加载gif？

Question

当我触发click事件时，我的nw.js应用程序开始处理先前从CSV文件中读取的数据数组。通常这需要一些时间并且页面冻结。我想添加一个loadingGif，以防止用户认为应用程序崩溃。

这是click事件（使用JQuery）。

$("#submitBtn").click({dataArr}, function(event){

    // erases the content of <tbody>
    emptyBody()

    // take the inputs from the user
    let activeFilters = createActiveFilters()

    // use the inputs to filter through a csv file
    let filteredReportsList = filterLines(activeFilters, dataArr)

    // show the results inside <tbody>
    showFilteredLines(filteredReportsList)

    // apply zebra rows
    zebraRows()

});

1 - 我尝试使用函数在处理部分之前添加图像，并在处理**之后使用另一个函数将其删除**。页面冻结，仅在完成所有处理后返回。因此添加或删除图像是没用的。

2 - 我尝试使用异步功能，但它也没有用。

// async function
let searchReports = async (dataArr) => {
    let activeFilters = await createActiveFilters()
    let filteredReportsList = await filterLines(activeFilters, dataArr)

    return filteredReportsList
}

// click event
$("#submitBtn").click({dataArr}, function(event){

    emptyBody()

    addLoadingGif()

    searchReports(dataArr).then(filteredReportsList => {

        removeLoadingGif()

        showFilteredLines(filteredReportsList)

        zebraRows()
    })
})

3 - 我尝试使用CSS动画，而不是gif图像。我成功更改了类，但动画没有显示，因为类的样式仅在处理后更改。

---

我不知道还能做什么。我感谢任何帮助！ ：）`

EDIT1

这是addLoadingGif

function addLoadingGif () {
    $('.loadingGif').addClass('loadingGif--on')
}

Edit2：为了简化这一点，我为我正在使用的模板HTML和javascript文件创建了要点。但它在pt-br中有记录，对不起。

来自我的nw.js app https://gist.github.com/Titowisk/b73cd303d8fb7a7b0d5bd9cd1514c891的模板HTML

来自我的nw.js应用程序https://gist.github.com/Titowisk/18a0d02a04b624f7c855f1bd82147913的Javascript文件

Edit3：添加了上面的第三次尝试。

Answer 1

试试这个：

var tab = document.createElement('div');
tab.style="z-Index:999999;opacity:.5;position:absolute;abackground:rgba(128,128,128,.75);left:0px;top:0px;color:rgb(255,255,0);height:100%;width:100%;background: url(*your gif* ) center center no-repeat rgba(128,128,128,.75);";
window.top.document.body.appendChild(tab);
$.ajax({url: 'emptyfile.php',type: 'POST',async:true,data: "",dataType: 'html', success: function(msg){ 

// here insert your code

    top.document.body.removeChild(tab);
 },error: function (xhr, ajaxOptions, thrownError) {alert("ERROR:" + xhr.responseText+" - "+thrownError);}});

Answer 2

所以，我参加了一个JQuery Ajax课程，并应用于我的问题，它的工作！

我使用了$ .get（）函数。在调用它之前，我切换了我的css加载动画的可见性，在$ .get完成之后，我再次切换我的css加载动画的可见性。

这是代码

$('#submitBtn').click({dataArr, reportsType}, (e) => {

    emptyBody()

    // show gif
    $('.donutSpinner').toggle()

    let activeFilters = createActiveFilters()

    $.get(`../../assets/csv/${fileName}`, (rawCsv) => {

        // I transfered the csv processing inside the get callback
        dataArr = processRawCsv(rawCsv)

        let filteredReportsList = filterLines(activeFilters, dataArr)

        showFilteredLines(filteredReportsList, reportsType)
        // -------------------------------------------------------
    })
    .fail(() => {
        console.log('falhou!')
    })
    .always(() => {

        // hide gif
        $('.donutSpinner').toggle()

        zebraRows()
    })
})