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)设置登录界面的点击事件:

  1. $('#submit').click(function() {
  2. $(this).css('background','green');//设置当前点击登录按钮后,改变其登录框的颜色
  3. confirm(); //调用ajax函数
  4. })

2)loading加载:

  1. $(function () {
  2. $.ajaxSetup({
  3. layerIndex:-1,
  4. beforeSend: function () { //插件加载前
  5. this.layerIndex = layer.load(0, { shade: [0.01, '#fff'] });
  6. $('#submit').val("正在登录")
  7. },
  8. complete: function () { //完成加载后执行
  9. layer.close(this.layerIndex); //完成加载后关闭loading
  10. },
  11. error: function () { //报错时执行
  12. layer.alert('显示异常,请刷新后重试', {
  13. skin: 'layui-layer-molv'
  14. , closeBtn: 0
  15. , shift: 4 //动画类型
  16. });
  17. }
  18. });
  19. });

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. waven 常用构建命令

    常用命令 mvn compile : 编译maven项目 mvn test : 运行项目测试用例 mvn package : 将项目打成jar包 mvn clean : 删除target目录下生成的文 ...

  2. MySQL忘记密码了怎么办?

    接手一个项目时,如果上一位负责人没有把项目文档.账号密码整理好是一件很头疼的事情.. 例如,当你想打开MySQL数据库的时候 输入: mysql -u root -p 一回车想输入密码,发现密码错误! ...

  3. C++--------------------------------指针和数组替换使用原因

    马上要考试了,复习数据结构中,对C的指针不太了解,在严蔚敏<数据结构(C语言版)>中,发现p22定义顺序存储结构: typedef srtuct{ ElemType *elem; //存储 ...

  4. MVC layout 命名空间引用问题

    虽然用MVC做了很多项目,但是都是在别人搭好的框架上实现 今天碰到一个很简单的命名空间引用问题 如图所示,Scripts和Styles 都没有引用命名空间 解决方法一: 直接使用 System.Web ...

  5. delete/truncate/drop table的区别以及锁在这里的角色

    数据库删除语句 Drop/Delete/Truncate比较 Delete :删除数据表中的行(可以删除某一行,也可以在不删除数据表的情况下删除所有行). 删除某一行:Delete from 数据表名 ...

  6. nodejs查询数据库后,获取result结果集并赋值返回

    nodejs获取了查询结果,但不能返回出去, 情形如下: var query = function (path,id,param,sqlWhere,res){ var aa = 111;var sql ...

  7. C#控制台程序输出彩色文字

    /* * 由SharpDevelop创建. * 用户: 从前的我 * 日期: 2012-06-03 * 时间: 21:30 * * 要改变这种模板请点击 工具|选项|代码编写|编辑标准头文件 */ u ...

  8. CI框架中集成CKEditor编辑器的教程

    CKEditor是在很多开发过程中都会用到的一个富文本编辑器,那么如何在CI框架中使用它呢?这里介绍了在CI下使用CKEditor的方法,版本比较低,是在CI 1.7.3下使用fckeditor 2. ...

  9. 在idea中关闭vim模式

    每次在idea的文件中插入新的内容时,都需要先点击键盘上的i 进入插入模式,感觉这是vim编辑器的模式,很不习惯. 你可能是按照了vim emulation 插件, 在setting-----plug ...

  10. Lambda表达式浅析

    Lambda 表达式是一种可用于创建"委托"或"表达式目录树"类型的"匿名函数".通过使用 lambda 表达式,可以写入可作为参数传递或作 ...