JQuery+Bootstrap 自定义全屏Loading插件的示例demo

JQuery+Bootstrap 自定义全屏Loading插件

function KZ_Loading(config) {
  if (this instanceof KZ_Loading) {
    const domTemplate = '@@KZ_Loading_Text@@';
    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遮罩层--%>

  　　
  　　　　
  　　　　　　
  　　　　
  　　　　
loading...
  　　

<%--loading方法--%>

总结

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