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

2024-12-23 21:55:31

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

layui加载数据显示loading加载完成loading消失的实例代码

项目中,向后台请求数据,经常会出现较长的等待时间,这时我们需要一个loading转圈圈,接收到后台的数据时,让loading消失这layui中使用方法如下:以表格为例,每次加载表格数据时加一个loading <link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow" /> <script type="text/javascr
layui异步加载table表中某一列数据的例子

layui中table加载数据时如果数据存放在不同数据表中那样一个请求拼接每行表格数据然后统一返回太慢 //页面加载时请求另一张表的数据 var slotGroup; admin.req({ url: '请求地址' , method: 'POST' , dataType: "json" , async: false , success: function (res) { slotGroup = res.data; console.log(slotGroup) } }); ta
Layui table field初始化加载时进行隐藏的方法

layui应该是现在用的比较多的前端框架了,尤其是layui.table数据表格非常强大. 在很多时候,我们需要从数据库中拿到记录的id,但是我们又不希望在页面上展现,所以需要对一些字段进行隐藏. 看了网上很多的教程,各种对field进行隐藏,通过display:none等常规手段,虽然列是隐藏了,但是整个表格的展现却出了问题. 今天仔细看了文档,原来layui中已经封装了field隐藏的方法: 用法: {field:'id',title:'ID' ,hide:true},直接在fieId中,使
解决layui动态加载复选框无法选中的问题

问题描述 1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消 2.有分页时,最后一页数据过少会导致其他页下方数据无法选中 3.页面没加载完或暴力测试时也会不能选中利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法--自己写一个复选框  <td> <div class="la
layui table动态表头改变表格头部重新加载表格的方法

改变头部原理:删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝!! 下面是示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</tit
Layui弹出层加载做编辑页面的方法

layui是一款优秀的模块化前端框架.利用layui弹出层做编辑页面先上效果图基本准备,引入layui的layui.css,layui.js文件 <link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" rel="external nofollow" media="all"> <script src="..
layui form表单提交之后重新加载数据表格的方法

HTML form表单 <p style="text-align: center"><img src="//files.jb51.net/file_images/article/201909/20190911173925.jpg" alt="" /></p> <div class="layui-row"> <form class="layui-form layui
layui动态加载多表头的实例

效果动态生成header 返回的header数据:格式为数组,因为是二级表头,所以是二元数组后台动态拼接数组,返回数组后把两个数组push到一个空数组中就可以组成一个动态的多级表头 var header= []; var header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '子商户名称', width: 140, rowspan:
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子

使用layui框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可如下图,提供新增,编辑,查看等功能 js方法 /** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @param {} title 标题不显示为false * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度 * @param {} path
layui 实现加载动画以及非真实加载进度的方法

近期在做一个网站的查询功能,但是由于数据量确实太大,分页查询后也是很慢,同时查询出的数据部分还要进行一些处理,导致用户说要我们给他们加一个查询进度,要百分比显示.加上加载动画很简单,layui有现成的.但是还要动画..我tm(手动微笑),原谅我水平比较低.然后就瞎搞,终于搞出了一个加载的进度,虽然还是假的... 上面废话有点多,直接切入正题. 首先是html代码.....(不存在的2333333........) 然后是js代码: //这里是必须要有的,_index的作用是用来关闭遮罩,详细看l
layui内置模块layim发送图片添加加载动画的方法

layim图片上传时可能会因网络等原因导致图片上传速度慢,而前端此时不给于任何提示的话会导致用户体验差,因此我们需在图片上传方法稍加拓展,具体思路即在发出请求前加载动画,上传完成后关闭动画,具体代码如下: 1.在js中找到图片上传方法,添加如下代码: PC端layim.js 移动端layim-mobile.js 以上这篇layui内置模块layim发送图片添加加载动画的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
原生JS实现首页进度加载动画

js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,
Android 使用 Path 实现搜索动态加载动画效果

今天实现一个搜索动态加载数据的动画效果,还是先看效果吧,用文字描述干巴巴的,看图说话什么都明白了, 实现这个就是使用Path中的getSegment()不断的去改变它截取片段的start和stop,再结合动画,今天就分步骤实现它,看完以后你也会觉的不是很难,只是没想到这么实现而已,所以要多见识,所谓眼界决定你的高度,还是延续我写博客的习惯,一步步分析,第一步就是绘制如下图: 如果单纯的绘制这个图很简单很简单的,绘制一个圆,然后再绘制一根线就搞定,但是要考虑这里的效果,就不能这么干了,如果你看了上
iOS动画解析之圆球加载动画XLBallLoading的实现

前言当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,本文将详细给大家介绍关于iOS圆球加载动画XLBallLoading实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.显示效果二.原理分析 1.拆解动画从效果图来看,动画可拆解成两部分:放大动画.位移动画放大动画比较简单,这里主要来分析一下位移动画 (1).先去掉缩放效果: 屏蔽放大效果 (2).去掉其中的一个圆球现
jQuery生成假加载动画效果

在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("
分享8款优秀的 jQuery 加载动画和进度条插件

加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载在线演示 Percentage Loader 一款轻量的 jQue
Angular4如何自定义首屏的加载动画详解

前言相信大家都知道,在默认情况下,Angular应用程序在首次加载根组件时,会在浏览器的显示一个loading... 我们可以轻松地将loading修改成我们自己定义的动画.下面话不多说,来一起看看详细的介绍: 这是我们要实现首次加载的效果: 根组件标签中的内容请注意:在你的入口文件index.html中,默认的loading...只是插入到根组件标签之间: <!doctype html> <html> <head> <meta charset="u
ios基于MJRefresh实现上拉刷新和下拉加载动画效果

本文介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,分享给大家,具体如下: 目录 1. 头部刷新动画 2.尾部刷新动画头部刷新动画 #import <MJRefresh/MJRefresh.h> @interface HZNormalHeader : MJRefreshGifHeader @end #import "HZNormalHeader.h" @implementation HZNormalHeader #pragma mark - 重写父类的方
Android自定义view实现阻尼效果的加载动画

效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识先来解释下什么叫阻尼运动阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动．因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动．阻尼振动是非简谐运

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

相关推荐

随机推荐