Question

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

这是点击事件（使用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应用中的模板HTML https://gist.github.com/Titowisk/b73cd303d8fb7a7b0d5bd9cd1514c891

我的nw.js应用中的Javascript文件 https://gist.github.com/Titowisk/18a0d02a04b624f7c855f1bd82147913

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()
    })
})

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

2 个答案: