显示加载gif图像，直到函数成功
Show loading gif image until success of function
我想在函数调用时显示一个正在加载的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");
}
}
}
}从我所提供的代码中可以看到，您缺少的部分不在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作为background-image。更容易处理。
相关文章：
- 在另一个函数成功结束后调用该函数
- jQuery成功函数中的ajax成功函数
- 执行ajax成功函数-jQUERY
- I'我试图在文本区域中进行特定的输入，调用特定的javascript函数，但没有成功;不起作用
- 绑定到 x 可编辑的成功函数未使用正确的参数执行
- 将值传递到jQuery成功函数中的引导模式
- Ajax没有't执行成功函数
- 为什么Jquery$.ajax在函数调用中触发所有statusCode，即使调用成功
- 在成功时操作 AJAX 函数
- 如何从ajax成功回调函数中读取javascript变量
- 使用JSON数据检索AJAX外部成功函数
- Javascript异步成功函数-互斥
- 同步函数调用涉及post-json调用，其中一个函数应该在另一个函数成功后成功
- 向 Jquery 提供一个非匿名函数:成功 + 额外的混乱
- jQuery AJAX函数成功不起作用
- 当Ajax函数成功时显示消息
- 显示加载gif图像，直到函数成功
- ajax内调用函数成功
- Ajax/jQuery 中的函数“成功”
- jQuery: AJAX中调用递归函数成功
