这篇文章主要为大家展示了“JQuery+Bootstrap如何自定义全屏Loading插件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JQuery+Bootstrap如何自定义全屏Loading插件”这篇文章吧。
创新互联建站是专业的庆云网站建设公司，庆云接单;提供做网站、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行庆云网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
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 = '基本调用：
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遮罩层
