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 ...
随机推荐
- CString 与其它数据类型转换问题
CString 头文件#include <afx.h> string 头文件#include <string.h> CString 转char * CString cstr; ...
- 文字小于12px时,设置line-height不居中问题
设置了文字了小于12px时,会存在设置了line-height的不生效的问题,主要是由于基线的问题,这篇文章解释的很清楚,有兴趣的可以看下https://blog.csdn.net/q12151634 ...
- 网络图片转换到本地并转换成base64位
/** * 网络图片转换到本地并转换成base64位 * @param $url * @return string */ public function imgzhuanhuan($url) { // ...
- jQuery.lazyload详解(转)
转自:http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html <script type="text/javascrip ...
- printf 字符串格式
摘自:http://www.cppblog.com/API/archive/2013/07/18/201923.html 首先 long long是C99标准新规定的.不少编译器还不支持,Micros ...
- AndroidManifest.xml中android:configChanges的简介
程序在运行时,一些设备的配置可能会改变,如:横竖屏的切换.键盘的可用性等,这样的事情一发生,Activity会重新启动,其中的过程是:在销毁之前会先 called onSaveInstanceStat ...
- .NetCore 使用Zipkin 分布式服务追踪监控服务性能
参考资料 https://zipkin.io/ https://github.com/openzipkin/zipkin/ https://github.com/openzipkin/zipkin4n ...
- nginx log 错误502 upstream sent too big header while reading response header from upstream
cookies的值超出了范围我是说 看看了一下日志 错误502 upstream sent too big header while reading response header from upst ...
- CSS3 transition实现超酷图片墙动画效果
一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...
- 镜像文件挂载及本地yum搭建
环境:centos7.2 背景:企业内网不能上网,需安装软件以及软件之间的依赖问题 解决方案:下载和企业内网服务器相同版本的centos7.2镜像文件完整版(不是最小化的iso) 挂载镜像文件 1.上 ...