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的更多相关文章

  1. loading加载动画效果js实现

    <style>.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; ...

  2. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  3. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  4. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  5. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  6. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  7. ajax请求完之前的loading加载

    很多时候我们需要引入框架来开发项目,这时我们可能会遇到页面还没加载完源码出来了的问题,给用户一种不好的视觉体验,这是便需要loading加载了,来完善用户体验! /*loading.js*/ // 加 ...

  8. 基于jquery实现页面loading加载效果

    实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...

  9. vue2 自定义全局组件(Loading加载效果)

    vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...

随机推荐

  1. CString 与其它数据类型转换问题

    CString 头文件#include <afx.h> string 头文件#include <string.h> CString 转char * CString cstr; ...

  2. 文字小于12px时,设置line-height不居中问题

    设置了文字了小于12px时,会存在设置了line-height的不生效的问题,主要是由于基线的问题,这篇文章解释的很清楚,有兴趣的可以看下https://blog.csdn.net/q12151634 ...

  3. 网络图片转换到本地并转换成base64位

    /** * 网络图片转换到本地并转换成base64位 * @param $url * @return string */ public function imgzhuanhuan($url) { // ...

  4. jQuery.lazyload详解(转)

    转自:http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html <script type="text/javascrip ...

  5. printf 字符串格式

    摘自:http://www.cppblog.com/API/archive/2013/07/18/201923.html 首先 long long是C99标准新规定的.不少编译器还不支持,Micros ...

  6. AndroidManifest.xml中android:configChanges的简介

    程序在运行时,一些设备的配置可能会改变,如:横竖屏的切换.键盘的可用性等,这样的事情一发生,Activity会重新启动,其中的过程是:在销毁之前会先 called onSaveInstanceStat ...

  7. .NetCore 使用Zipkin 分布式服务追踪监控服务性能

    参考资料 https://zipkin.io/ https://github.com/openzipkin/zipkin/ https://github.com/openzipkin/zipkin4n ...

  8. 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 ...

  9. CSS3 transition实现超酷图片墙动画效果

    一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...

  10. 镜像文件挂载及本地yum搭建

    环境:centos7.2 背景:企业内网不能上网,需安装软件以及软件之间的依赖问题 解决方案:下载和企业内网服务器相同版本的centos7.2镜像文件完整版(不是最小化的iso) 挂载镜像文件 1.上 ...