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. matrix 矩阵(多维DP)

    题面 \(solution:\) 这一题其实就是一个非常明显的三维背包问题(但博主太弱了就10分QAQ) \(F[i][j][k]:\)表示走到\((i,j)\)这个位置并且背包容量为 \(k\) 时 ...

  2. Caffe 碎碎念

    Window Data Layer window data layer 的数据是存在硬盘上的图片, 需要在一个txt里指定用于训练或测试的图片以及bounding box, bounding box ...

  3. (AC自动机)C - 病毒侵袭持续中

    题目链接:https://cn.vjudge.net/contest/280743#problem/C 题目大意:中文题 具体思路:首先取ascii码0-130是肯定不行的了,会超时.然后就开始简化, ...

  4. python学习之——import sys模块

    (1)sys.argv sys模块中的argv变量通过使用点号指明——sys.argv——这种方法的一个优势是这个名称不会与任何在你的程序中使用的argv变量冲突.另外,它也清晰地表明了这个名称是sy ...

  5. Oracle 数据库和监听器开机自启动两种实现方法

    数据库和监听器开机自启动   编辑oratab文件: 修改:orcl:/u01/app/oracle/product/11.2.0/db_1:N            orcl:/u01/app/or ...

  6. springboot中url地址重写(urlwrite)

    在日常网站访问中,会把动态地址改造成伪静态地址. 例如: 访问新闻栏目 /col/1/,这是原有地址,如果这样访问,不利于搜索引擎检索收录,同时安全性也不是很好. 改造之后: /col/1.html. ...

  7. Python黑魔法

    1. 赋值 In [1]: x = 1 ...: y = 21 ...: print x, y ...: ...: x, y = y, x ...: print x, y 1 21 21 1 2. 列 ...

  8. css中width和padding-top实现正方形

    .div{ width: 100%; height: 0; padding-top: 100% } 这个时候,padding-top的值与width相等,所以可以让div宽高一样,值为width的值

  9. 在IIS下部署SSL证书实现HTTPS

    在IIS下部署SSL证书实现HTTPS   HTTPS是以安全为目标的HTTP通道,简单讲是HTTP的安全版.谷歌已经制定了一项长远的计划,它的最终目标是将所有通过HTTP协议呈现的网页标为“不安全” ...

  10. On the Bias/Variance tradeoff in Machine Learning

    参考:https://codesachin.wordpress.com/2015/08/05/on-the-biasvariance-tradeoff-in-machine-learning/ 之前一 ...