layer.js中的loading加载
l本篇主要介绍layerjs中的loading加载在实际项目中的应用
1、使用的技术
前端：HTML5+CSS3+JS+layer.js
后端：.net
2、遇到的问题
在使用layer.js插件中提供的loading时，需要在layer.js中的layer.css找到对应的gif格式动态图，此gif图需要和插件中的loading加载gif图大小尺寸相同
3、layer.js中load()方法介绍
load不需要传太多的参数，根据自己喜欢的风格来设置。方法中提供三种风格，供其选择。且Load中的icon支持传入0-2，如果是0，无需传入。但是load默认是不会关闭的，需要在回调函数中关闭。
方法一：
var index = layer.load(); //不传入参数，默认传0
方法二：
var index = layer.load(1); //参数1，另外一种风格
方法三：
var index = layer.load(2,{time:10*1000}); //参数2，换一种风格；time设置最长等待时间
4、实际项目中的运用
在对应的需要加载loading的html页面的js中加入写入loading加载的代码，以首页登录页面为例：
1)设置登录界面的点击事件：
$('#submit').click(function() {
$(this).css('background','green');//设置当前点击登录按钮后，改变其登录框的颜色
confirm(); //调用ajax函数
})
2)loading加载：
$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () { //插件加载前
this.layerIndex = layer.load(0, { shade: [0.01, '#fff'] });
$('#submit').val("正在登录")
},
complete: function () { //完成加载后执行
layer.close(this.layerIndex); //完成加载后关闭loading
},
error: function () { //报错时执行
layer.alert('显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});
5、效果图