1 /**
2 * 自定义Loading插件
3 * @param {Object} config
4 * {
5 * content[加载显示文本],
6 * time[自动关闭等待时间(ms)]
7 * }
8 * @param {String} config
9 * 加载显示文本
10 * @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上
11 * @return {KZ_Loading} 对象实例
12 */
13 function KZ_Loading(config) {
14 if (
this instanceof KZ_Loading) {
15 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>'
;
16 this.config =
{
17 content: 'loading...'
,
18 time: 0
,
19 };
20 if (config !=
null) {
21 if (
typeof config === 'string'
) {
22 this.config = Object.assign(
this.config, {
23 content: config
24 });
25 }
else if (
typeof config === 'object'
) {
26 this.config = Object.assign(
this.config, config);
27 }
28 }
29 this.id =
new Date().getTime().toString();
30 this.state = 'hide'
;
31
32 /*显示 */
33 this.show =
function () {
34 $('.kz-loading[data-kzid=' +
this.id + ']'
).modal({
35 backdrop: 'static'
,
36 keyboard:
false
37 });
38 this.state = 'show'
;
39 if (
this.config.time > 0
) {
40 var that =
this;
41 setTimeout(
function () {
42 that.hide();
43 },
this.config.time);
44 }
45 };
46 /*隐藏 */
47 this.hide =
function (callback) {
48 $('.kz-loading[data-kzid=' +
this.id + ']').modal('hide'
);
49 this.state = 'hide'
;
50 if (callback) {
51 callback();
52 }
53 };
54 /*销毁dom */
55 this.destroy =
function () {
56 var that =
this;
57 this.hide(
function () {
58 var node = $('.kz-loading[data-kzid=' + that.id + ']'
);
59 node.next().remove();
60 node.remove();
61 that.show =
function () {
62 throw new Error('对象已销毁！'
);
63 };
64 that.hide =
function () {};
65 that.destroy =
function () {};
66 });
67 }
68
69 var domHtml = domTemplate.replace('@@KZ_Loadin_ID@@',
this.id).replace('@@KZ_Loading_Text@@',
this.config.content);
70 $('body'
).append(domHtml);
71 }
else {
72 return new KZ_Loading(config);
73 }
74 }
基本调用：
1 var loading =
new KZ_Loading('数据加载中。。。'
);
2 setTimeout(
function () {
3 console.log('加载完成!'
);
4 loading.hide();
5 }, 1000);
自动关闭：
1 var loading =
new KZ_Loading({
2 content: '数据加载中。。。'
,
3 time: 2000
4 });
5 loading.show();
销毁Loading Dom节点：
1 loading.destroy();
转载于:https://www.cnblogs.com/xinxin-csharp/p/11122438.html
相关资源：全屏loading图有遮罩效果 当显示全屏loading图时无法操作页面上的按钮
