Ajax加載資料中的loading效果

如題，不難了解，故不多做介紹，直切主題。

在html任意位置放置loading圖示：

<div id="cisLoading">
	<img src="/srp/assets/plugins/jstree/throbber.gif" style="width:24px;height:24px" />
</div>
           

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 = "<script src='assets/pages/jquery.dashboard.js'></"+"script>";
		$("#dashboard").append(chartScript);
		showKnob();
	}, null, null, 3);

	var data3 = {"res": "43+44+45+46","paramStr": "[{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null},{\"e_branchid\": null,\"bizdate\": null}]"};
	handleDateValue(data3);
	g.ajax("/srp/data", data3, function (jsonStr) {
		setValue(JSON.parse(jsonStr));
	}, null, null, 3);
};
           

此頁面需要3個ajax同時請求，當最後一個加載結束，不論成功失敗，立即隐藏loading，則需設定child_parallel_count=3即可。