我想在函数调用时显示一个加载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");
}
}
}
}
答案 0 :(得分：0)
From what I can see in the provided code, the part you're missing is not in the JS, but actually in the HTML: the img tag is missing.
<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" />Of course you will need to position the img tag properly with some CSS to have it on the button.
Another solution would have been to use CSS class to add/remove the gif as a background-image on the button directly. Much easier to handle.