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 ...
随机推荐
- cordova app 监听物理返回键
物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...
- 记关于webpack4下css提取打包去重复的那些事
注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试 经过2天的填坑,现在终于有点成果 环境webpack4.6 + html-webpack-pl ...
- spring如何管理mybatis(二) ----- SqlSession的线程安全性
在之前的文章中我们了解到最终的数据库最终操作是走的代理类的方法: @Override public Object invoke(Object proxy, Method method, Object[ ...
- 日常训练赛 Problem C – Complete Naebbirac’s sequence
比赛链接https://vjudge.net/contest/256988#status/17111202012/C/0/ 大意:三个操作,使得输入的数中,从1-n,每一个数出现的次数相同. wa代码 ...
- xtrabackup 恢复单个表【转】
一.安装与备份 1. 下载安装XtraBackup$wget http://www.percona.com/redir/downloads/XtraBackup/LATEST/binary/tarba ...
- javaScript对金额处理的方式
例如 var price = $("#price").val(); 此时price 为字符串格式 假使我们想将其乘以100 可以选择 price*100将其转换为数值格式 但是有些 ...
- mongodb分页查询
Limit与Skip方法 MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录,可以使用MongoDB的Limit方法,limit()方法接受一个数字参数,该参数指 ...
- 《jquery实战》javascript 必知必会(1)
A1 javascript对象的基本原理 JS 的 Object 与其他兄弟面向对象所定义的根本对象,几乎没有什么共同之处. JS 的 Object 一旦创建,它不持有任何数据,而且不表示什么语义. ...
- 【LOJ】#2106. 「JLOI2015」有意义的字符串
题解 点一个技能点叫特征方程 就是 \(a_{n + 2} = c_1 a_{n + 1} + c_2 a_{n}\) \(x^2 = c_1 x + c_2\) 解出两根来是\(x_1,x_2\) ...
- bzoj 1103
题目大意:有一棵树根为1,刚开始每条边的权值为1, 现在有m + n - 1 个操作, A :x y , 将x和y相连的边权值变为1, W:x, 询问x到1路径上的权值和. 思路 : 方法一: ...