loading加载和layer.js
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、效果图
loading加载和layer.js的更多相关文章
- loading加载动画效果js实现
<style>.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- 原生JS+ CSS3创建loading加载动画;
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- 图片延时加载jquery.inview.js用法详解
我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- ajax请求完之前的loading加载
很多时候我们需要引入框架来开发项目,这时我们可能会遇到页面还没加载完源码出来了的问题,给用户一种不好的视觉体验,这是便需要loading加载了,来完善用户体验! /*loading.js*/ // 加 ...
- 基于jquery实现页面loading加载效果
实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...
- vue2 自定义全局组件(Loading加载效果)
vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...
随机推荐
- matrix 矩阵(多维DP)
题面 \(solution:\) 这一题其实就是一个非常明显的三维背包问题(但博主太弱了就10分QAQ) \(F[i][j][k]:\)表示走到\((i,j)\)这个位置并且背包容量为 \(k\) 时 ...
- Caffe 碎碎念
Window Data Layer window data layer 的数据是存在硬盘上的图片, 需要在一个txt里指定用于训练或测试的图片以及bounding box, bounding box ...
- (AC自动机)C - 病毒侵袭持续中
题目链接:https://cn.vjudge.net/contest/280743#problem/C 题目大意:中文题 具体思路:首先取ascii码0-130是肯定不行的了,会超时.然后就开始简化, ...
- python学习之——import sys模块
(1)sys.argv sys模块中的argv变量通过使用点号指明——sys.argv——这种方法的一个优势是这个名称不会与任何在你的程序中使用的argv变量冲突.另外,它也清晰地表明了这个名称是sy ...
- Oracle 数据库和监听器开机自启动两种实现方法
数据库和监听器开机自启动 编辑oratab文件: 修改:orcl:/u01/app/oracle/product/11.2.0/db_1:N orcl:/u01/app/or ...
- springboot中url地址重写(urlwrite)
在日常网站访问中,会把动态地址改造成伪静态地址. 例如: 访问新闻栏目 /col/1/,这是原有地址,如果这样访问,不利于搜索引擎检索收录,同时安全性也不是很好. 改造之后: /col/1.html. ...
- Python黑魔法
1. 赋值 In [1]: x = 1 ...: y = 21 ...: print x, y ...: ...: x, y = y, x ...: print x, y 1 21 21 1 2. 列 ...
- css中width和padding-top实现正方形
.div{ width: 100%; height: 0; padding-top: 100% } 这个时候,padding-top的值与width相等,所以可以让div宽高一样,值为width的值
- 在IIS下部署SSL证书实现HTTPS
在IIS下部署SSL证书实现HTTPS HTTPS是以安全为目标的HTTP通道,简单讲是HTTP的安全版.谷歌已经制定了一项长远的计划,它的最终目标是将所有通过HTTP协议呈现的网页标为“不安全” ...
- On the Bias/Variance tradeoff in Machine Learning
参考:https://codesachin.wordpress.com/2015/08/05/on-the-biasvariance-tradeoff-in-machine-learning/ 之前一 ...