Jquery 点击页面按钮，显示loading样式

点击页面按钮，显示loading样式

HTML代码

<div id="loading-bg">
	<div id="loading"><img src="/common/images/common/loading.svg" width="24" height="30"/></div>
	<div id="loading-message"></div>
</div>

JS代码

loading页面显示/隐藏函数。
页面文字屏幕中央显示，文字内容由参数message设置。

function loading(mode, message) {
	let $loadingBg = $("#loading-bg");
	$("#loading-message").html("");

	if (!mode || mode == "show") {
		$loadingBg.css("height", document.documentElement.clientWidth + "px");
		$loadingBg.show();
		let h = $("#loading").css("height");
		h = parseInt(h, 10) / 2;
		let wh = $(window).height();
		wh = wh / 2;
		h = (wh - h);
		$("#loading").css("top", h +"px");

		$("#loading-message").css("top", (h + 35) +"px");
		if (message) {
			$("#loading-message").html(message);
		}

	} else if (mode == "hide") {
		$loadingBg.hide();
	}
}

$.ajax({
	"url":...,
	// ajax请求参数
	"beforeSend":function() {
		loading("show", "数据加载中...");
	},
}).done(function() {
	loading("hide");
	// ajax请求成功后处理
}).fail(function() {
	loading("hide");
	// ajax请求失败后处理
});

css样式

#loading-bg {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
    text-align: center;

    z-index: 2000;

    left: 0px;
    top: 0px;
    display: none;
}

#loading {
    width: 100%;
    position: fixed;
    top: 50%;
}

#loading-message {
    width: 100%;
    position: fixed;
    top: 50%;
    color: #fff;
}