热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇layui实现加载动画以及非真实加载进度的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

近期在做一个网站的查询功能,但是由于数据量确实太大,分页查询后也是很慢,同时查询出的数据部分还要进行一些处理,导致用户说要我们给他们加一个查询进度,要百分比显示。加上加载动画很简单,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 &#63; 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: "
正在查询(0%)
", 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 实现加载动画以及非真实加载进度的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据,并以51CTO学院为例,进行详细的技术解析和实践操作。 ... [详细]
  • 深入分析十大PHP开发框架
    随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 本文详细介绍了浏览器的同源策略及其重要性,并探讨了多种实现跨域访问的方法。同源策略是浏览器的一项核心安全机制,确保不同源的客户端脚本无法在未经授权的情况下读取或修改其他来源的资源。例如,a.com下的JavaScript代码通过AJAX请求获取b.com的数据将被阻止。 ... [详细]
author-avatar
外星人源码商城
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有