JQuery+Bootstrap 自定义全屏Loading插件

/**
 * 自定义Loading插件
 * @param {Object} config
 * {
 * content[加载显示文本],
 * time[自动关闭等待时间(ms)]
 * } 
 * @param {String} config 
 * 加载显示文本
 * @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上
 * @return {KZ_Loading} 对象实例
 */
function KZ_Loading(config) {
 if (this instanceof KZ_Loading) {
 const domTemplate = '<div class="modal fade kz-loading" data-kzid="@@KZ_Loadin_ID@@" backdrop="static" keyboard="false"><div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px"><div class="progress progress-striped active" style="margin-bottom: 0;"><div class="progress-bar" style="width: 100%;"></div></div><h5>@@KZ_Loading_Text@@</h5></div></div>';
 this.config = {
 content: 'loading...',
 time: 0,
 };
 if (config != null) {
 if (typeof config === 'string') {
 this.config = Object.assign(this.config, {
 content: config
 });
 } else if (typeof config === 'object') {
 this.config = Object.assign(this.config, config);
 }
 }
 this.id = new Date().getTime().toString();
 this.state = 'hide';

 /*显示 */
 this.show = function () {
 $('.kz-loading[data-kzid=' + this.id + ']').modal({
 backdrop: 'static',
 keyboard: false
 });
 this.state = 'show';
 if (this.config.time > 0) {
 var that = this;
 setTimeout(function () {
 that.hide();
 }, this.config.time);
 }
 };
 /*隐藏 */
 this.hide = function (callback) {
 $('.kz-loading[data-kzid=' + this.id + ']').modal('hide');
 this.state = 'hide';
 if (callback) {
 callback();
 }
 };
 /*销毁dom */
 this.destroy = function () {
 var that = this;
 this.hide(function () {
 var node = $('.kz-loading[data-kzid=' + that.id + ']');
 node.next().remove();
 node.remove();
 that.show = function () {
 throw new Error('对象已销毁！');
 };
 that.hide = function () {};
 that.destroy = function () {};
 });
 }

 var domHtml = domTemplate.replace('@@KZ_Loadin_ID@@', this.id).replace('@@KZ_Loading_Text@@', this.config.content);
 $('body').append(domHtml);
 } else {
 return new KZ_Loading(config);
 }
}

基本调用：

var loading = new KZ_Loading('数据加载中。。');
setTimeout(function () {
 console.log('加载完成!');
 loading.hide();
}, 1000);

自动关闭：

var loading = new KZ_Loading({
 content: '数据加载中。。',
 time: 2000
});
loading.show();

销毁Loading Dom节点：

 loading.destroy();

ps：下面看下基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%>
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
 　　<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
 　　　　<div class="progress progress-striped active" style="margin-bottom: 0;">
 　　　　　　<div class="progress-bar" style="width: 100%;"></div>
 　　　　</div>
 　　　　<h5 id="loadText">loading...</h5>
 　　</div>
</div>
<%--loading方法--%>
<script type="text/javascript">
 var loadingTime= 5;//默认遮罩时间
 showLoading = function (loadText) {
 if(!loadText){
 $("#loadText").html(loadText)
 }
 $('#loadingModal').modal({backdrop: 'static', keyboard: false});
 }
 hideLoading = function () {
 $('#loadingModal').modal('hide');
 }
</script>

总结

以上所述是小编给大家介绍的JQuery+Bootstrap 自定义全屏Loading插件的示例demo,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！