layui 实现加载动画以及非真实加载进度的方法


Posted in Javascript onSeptember 23, 2019

近期在做一个网站的查询功能,但是由于数据量确实太大,分页查询后也是很慢,同时查询出的数据部分还要进行一些处理,导致用户说要我们给他们加一个查询进度,要百分比显示。加上加载动画很简单,layui有现成的。但是还要动画。。我tm(手动微笑),原谅我水平比较低。然后就瞎搞,终于搞出了一个加载的进度,虽然还是假的。。。

上面废话有点多,直接切入正题。

首先是html代码。。。。。(不存在的2333333........)

然后是js代码:

//这里是必须要有的,_index的作用是用来关闭遮罩,详细看layui的文档
 var _index;
 var _lp_baseTime = 0;
 var _lp_startTime = 0;
 function updateLoadProgress() {
  if (_lp_baseTime < 0) {
   layer.close(_index);
   return;
  }
  var dval = parseInt(new Date().valueOf())- parseInt(_lp_startTime);
  var timeDifference = (dval / _lp_baseTime).toFixed(2);
  var lp = timeDifference < 1 ? timeDifference * 100 : 99;
  $("#loadProgress").html(parseInt(lp));
  setTimeout(function () { updateLoadProgress(); return; }, 650);
 }
 
 
 function 你的函数(){
 
 $.ajax({
  url:url,
  async:true,
  data:{},
  beforeSend:function(){
   //敲黑板
   _index = layer.load(1, {
     content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查询(<span id='loadProgress' >0</span>%)</div>",
     shade: [0.5, '#000']
    });
   //这里是预估的时间,因为整个进度都是根据消耗时间计算的 = =
   //这里的start,end,stns都是原始项目里带的。这个的作用是计算要等待的时长的,可以给一个固定值或者其他的东西公式,保证结果是正整数,单位是毫秒即可。
   _lp_baseTime = Math.abs(new Date(end).valueOf() - new Date(start).valueOf()) / 3600000 * stns.split(',').length * 150;
   _lp_startTime = new Date().valueOf();
 
   setTimeout(function () { updateLoadProgress(); return; }, 60);
  },
  success:function(){ _lp_baseTime = -1; $("#loadProgress").html("100");layer.close(_index); },
  error:function(){
    _lp_baseTime = -1;
    layer.close(_index);
   }
 });
 
 }

OK,就是这么多,主要是利用预估的时间与现在已进行时间进行预估做比较,所以实际使用的时候还要进行一定程度的调整,但是,最起码也是个思路是不是233333,参考一下吧

超过时间时进度会定格在99%,所以,emmmm....注意预留一些时间

以上这篇layui 实现加载动画以及非真实加载进度的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 #Javascript
ES10的13个新特性示例(小结)
Sep 23 #Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 #Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 #Javascript
JS随机密码生成算法
Sep 23 #Javascript
详解mpvue开发微信小程序基础知识
Sep 23 #Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 #Javascript
You might like
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
用cssText批量修改样式
2009/08/29 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python tkinter label 更新方法
2018/10/11 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
架构师岗位职责
2013/11/18 职场文书
公司中秋节活动方案
2014/02/12 职场文书
客服部班长工作责任制
2014/02/25 职场文书
保护动物倡议书
2014/04/15 职场文书
家庭教育的心得体会
2014/09/01 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL