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 相关文章推荐
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP之预定义接口详解
2015/07/29 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
setTimeout时间设置为0详细解析
2018/03/13 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python进程间通信Queue工作过程详解
2019/11/01 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS