loading in layer.js
l This article mainly introduces the application of loading in layerjs in actual projects
1. Technology used
Front-end: HTML5+CSS3+JS+layer.js Back-
end: .net
2. Problems encountered
When using the loading provided in the layer.js plugin, you need to find the corresponding gif-format dynamic image in layer.css in layer.js. This gif image needs to be the same size as the loading gif image in the plugin.
3. Introduction to the load() method in layer.js
Load does not need to pass too many parameters, set it according to your favorite style. Three styles are provided in the method to choose from. And the icon in Load supports passing in 0-2, if it is 0, no need to pass in. But load will not be closed by default, it needs to be closed in the callback function.
Method 1:
var index = layer.load(); //No parameters are passed in, 0 is passed by default
Method 2:
var index = layer.load(1); //Parameter 1, another style
method 3:
var index = layer.load(2,{time:10*1000}); //parameter 2, another style; time sets the longest waiting time
4. Application in practical projects
Add the code for loading loading to the js of the corresponding html page that needs to be loaded. Take the home page login page as an example:
1) Set the click event of the login interface:
$('#submit').click(function() {
$(this).css('background','green');//设置当前点击登录按钮后，改变其登录框的颜色 confirm(); //调用ajax函数 })2) loading 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 //动画类型 }); } }); });