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(); } }; 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,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！