javascript - 显示正在加载 gif 图像，直到函数成功

Question

我想在调用函数时显示加载的 gif 图像，并希望将其显示到最后直到成功。

我想在单击以下按钮时显示图像:

 <button type="button" class="btn btn-primary btn-lg" style="margin-left: 7%; width: 50%;"
        id="Submit" name="Submit" onclick="prepareDataValueSet()">
  SYNC
</button>

现在在 prepareDataValueSet() 开始时，我想显示一个 gif 图像并想在最后隐藏它。

$('#loading').show(); // I am using this to show image
$('#loading').hide(); // and this for hiding it        

在这种情况下，任何人都可以帮助我，或者提供任何教程的链接，了解如何在特定时间插入加载图像或进度条吗？

以下是我的完整功能:我想在功能开始时显示图像并希望在成功时隐藏它:

 function prepareDataValueSet() {


            $('#loading').show();
         
            deMapping = {

                RBSK: {
                    'dsUID': 'tdTwLUxcQ8R', rootNodeName: 'RBSK_GIS_Indicator', url: baseURL+"/documents/NnxD6b7jqUr/data",orgUnitTagName: 'MCTSCode', des: [
                        {
                            xmlid: "Childhood_Diseases_0_6_Female",
                            dataElement: "123",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"

                        },
                        {
                            xmlid: "Childhood_Diseases_0_6_Male",
                            dataElement: "123",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:"0"
                        },
                        {
                            xmlid: "Childhood_Diseases_7_18_Female",
                            dataElement: "cEPledgs7rd",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"
                        },
                        {
                            xmlid: "Childhood_Diseases_7_18_Male",
                            dataElement: "cEPledgs7rd",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:"0"
                        },
                        {
                            xmlid: "Deficiencies_0_6_Female",
                            dataElement: "gKupqkIhW4n",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"
                        },
                        {
                            xmlid: "Deficiencies_0_6_Male",
                            dataElement: "gKupqkIhW4n",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:"0"
                        },
                        {
                            xmlid: "Deficiencies_7_18_Female",
                            dataElement: "FuEnn0bLuoT",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"
                        },
                        {
                            xmlid: "Deficiencies_7_18_Male",
                            dataElement: "FuEnn0bLuoT",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:"0"
                        },
                        {
                            xmlid: "Developmental_dealy_and_disability_0_6_Female",
                            dataElement: "v37HBq7C72j",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"
                        },
                        {
                            xmlid: "Developmental_dealy_and_disability_0_6_Male",
                            dataElement: "v37HBq7C72j",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:"0"
                        },
                        {
                            xmlid: "Developmental_dealy_and_disability_7_18_Female",
                            dataElement: "S1WMlAKnF8Z",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"
                        },
                        {
                            xmlid: "Developmental_dealy_and_disability_7_18_Male",
                            dataElement: "S1WMlAKnF8Z",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:""
                        },
                        {
                            xmlid: "defect_at_birth_0_6_Female",
                            dataElement: "JJO3utHjb3l",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"
                        },
                        {
                            xmlid: "defect_at_birth_0_6_Male",
                            dataElement: "JJO3utHjb3l",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:"0"
                        },
                        {
                            xmlid: "defect_at_birth_7_18_Female",
                            dataElement: "qoVmtykHboz",
                            categoryOptionCombo: "Cmzbo9LD8pJ",
                            value:"0"
                        },
                        {
                            xmlid: "defect_at_birth_7_18_Male",
                            dataElement: "qoVmtykHboz",
                            categoryOptionCombo: "PnAVAPG4yvb",
                            value:"0"
                        }
                    ]
                }

            };
            console.log("Url "+ deMapping[selectedText].url);
            for (var k = 0; k < deMapping[selectedText].des.length;k++) {
                for (var j = 0; j < dataelements.length; j++) {

                    if (deMapping[selectedText].des[k].dataElement == dataelements[j]) {

                        deMapping[selectedText].des[k].value =1;
                        var vf=  deMapping[selectedText].des[k].value;

                        msg1 += deMapping[selectedText].des[k].dataElement + ',';



                    }

                }
                if(deMapping[selectedText].des[k].value=="1")
                {
console.log("Mapped Data Elements: "+deMapping[selectedText].des[k].xmlid)


                }
else if(deMapping[selectedText].des[k].value=="0")
                {
//                    console.log("UnMapped Data Elements: "+deMapping[selectedText].des[k].xmlid)

                    ade +=deMapping[selectedText].des[k].xmlid + "<br>";
                    document.getElementById("qwe4").innerHTML = "<b>"+"Data Elements for following tags not Found in DHIS2"+"</b>" + "<br>" + ade +"<br>";
                }

            }

            $.ajax({
                type: "GET",
                url: deMapping[selectedText].url,
                dataType: "xml",
                async: false,
                crossDomain: true,
                headers: {},
                success: function (xml) {

                    $(xml).find(deMapping[selectedText].rootNodeName).each(function () {
                        var m0 = $(this).find(deMapping[selectedText].orgUnitTagName).text();
                        mstc.push(m0);
                        for (var k = 0; k < deMapping[selectedText].des.length; k++) {

                            mapDataValue[m0 + ":" + deMapping[selectedText].des[k].xmlid] = $(this).find(deMapping[selectedText].des[k].xmlid).text();
                        }
                    });


                }


            });


            var dataValueSet = {};
            var dataValues = [];


            for (var i = 0; i < mstc.length; i++) {

                if (dmap[map[mstc[i]]] == undefined) {
                    msg += mstc[i] + ',';
                }

                else if (dmap[map[mstc[i]]] != undefined) {


                    var org = map[mstc[i]];
                    for (var k = 0; k < deMapping[selectedText].des.length; k++) {

                        if (deMapping[selectedText].des[k].value == "1") {
                            dataValue = {};
                            dataValue["orgUnit"] = org;
                            dataValue["period"] = selectedText_year + selectedText_month;
                            dataValue["dataElement"] = deMapping[selectedText].des[k].dataElement;
                            dataValue["categoryOptionCombo"] = deMapping[selectedText].des[k].categoryOptionCombo;
                            dataValue["value"] = mapDataValue[mstc[i] + ":" + deMapping[selectedText].des[k].xmlid];
                            dataValues.push(dataValue);


                            dataValueSet.dataValues = dataValues;

                        }
                    }
                    $.ajax({
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        url: baseURL + '/dataValueSets',
                        data: JSON.stringify(dataValueSet),
                        dataType: 'json',
                        type: 'post',
                        async: false,
                        success: returnSuccess,
                        error: returnError

                    });

                    function returnSuccess(response) {

                        $('#loading').hide();


                    }

                    function returnError(xhr, textStatus, errorThrown) {
                        $('#loading').hide();
                        alert("inside error");
                  

                    }



                }
             

            }



           

        }

Answer 1

从我提供的代码中可以看到，您缺少的部分不在 JS 中，而是实际上在 HTML 中:缺少 img 标记。

 <button type="button" class="btn btn-primary btn-lg" style="margin-left: 7%; width: 50%;"
        id="Submit" name="Submit" onclick="prepareDataValueSet()">
  SYNC
</button>
<img src="../path/to/loader.gif" alt="Loading..." id="loading" style="display:none" />

当然，您需要使用一些 CSS 正确定位 img 标记，才能将其放在按钮上。

另一个解决方案是使用 CSS 类直接在按钮上添加/删除作为背景图像的 gif。更容易处理。