如题,不难理解,故不多做介绍,直切主题。
在html任意位置放置loading图标:
css样式文件,确保loading图标不论放大缩小窗口,都一直处于窗口正中心:
#cisLoading { position: fixed; left: 50%; top: 50%; z-index: 1000; display: none;}
js控制ajax在开始加载数据时,显示loading;加载完数据或ajax出错结束加载,隐藏loading:
// 当前并发ajax请求的次数g.parallel_count = 0;/** url:要访问的远程地址* data:访问远程地址时的参数* callback:回调函数* timeout:访问远程地址超时时间* err_message:发生错误时的提示信息* child_parallel_count:一个页面同时有多个ajax,此处传该页面上的ajax请求的总次数*/g.ajax = function (url, data, callback, timeout, err_message, child_parallel_count) { if(!data) data = {}; if(!timeout){ timeout = g.timeout; } $.ajax({ url: url, async: true, type: 'POST', timeout: timeout, data: data, //headers:{rtype:"query"},//可以附加头信息 beforeSend: function (XMLHttpRequest) { // 过滤某种条件下才控制loading效果 if (url == "/srp/data") { $("#cisLoading").show(); } }, success: function (text, status) { try { if (text == "533") { $("#cisLoading").hide(); alert("Cookie可能已丢失,本次请求无效,请退出重新登录!"); } else if (text == "534") { $("#cisLoading").hide(); alert("可能长时间未操作,用户信息已过期,请退出重新登录!"); } // var o = JSON.parse(text); // try{ // if(typeof o.message === "string") // o.message = JSON.parse(o.message); // }catch (e){ // console.warn("o.message to json faild"); // } else if (typeof callback === "function") { callback(text); } } catch (e) { console.debug(text); console.error(e); // alert(err_message); } }, error: function (XMLHttpRequest, status, errorThrown) { if (url == "/srp/data") { // 若未传child_parallel_count,代表可以直接hide // 或者传了,但parallel_count已经加到child_parallel_count if (child_parallel_count == undefined || ++g.parallel_count === child_parallel_count) { $("#cisLoading").hide(); g.parallel_count = 0; } } console.error(err_message); }, complete:function (XMLHttpRequest, status) { if (url == "/srp/data") { // 若未传child_parallel_count,代表可以直接hide // 或者传了,但parallel_count已经加到child_parallel_count if (child_parallel_count == undefined || ++g.parallel_count === child_parallel_count) { $("#cisLoading").hide(); g.parallel_count = 0; } } } });};
以上实现,通过全局变量g.parallel_count和ajax最后一个入参child_parallel_count,对一个页面同时并发请求多个ajax的情况下,去控制loading正确的显示隐藏机制,具体请求方式如下:
p0.fetchData = function () { var data1 = {"res": "20+21+22+23+24+25+37+38","paramStr": "[{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null}]"}; handleDateValue(data1); g.ajax("/srp/data", data1, function (jsonStr) { setValue(JSON.parse(jsonStr)); }, null, null, 3); var data2 = {"res": "34+36+35+30+31+32+33+27+28+29","paramStr": "[{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"bizdate\": null},{\"bizdate\": null},{\"bizdate\": null}]"}; handleDateValue(data2); g.ajax("/srp/data", data2, function (jsonStr) { setValue(JSON.parse(jsonStr)); var chartScript = "
此页面需要3个ajax同时请求,当最后一个加载结束,不论成功失败,立即隐藏loading,则需设置child_parallel_count=3即可。