【layui】layui loading窗口的使用

已于 2023-03-24 17:04:01 修改
阅读量3.8k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： #Layui 文章标签： loading layui
于 2022-03-24 13:31:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/david_520042/article/details/123708651
本文介绍了如何利用layui的loading组件创建一个在用户数据同步时显示的等待效果。通过展示loading窗口，提高用户体验。详细讲解了loading效果的实现、对应的JS函数以及在ajax调用中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

loading窗口的使用

loading窗口的使用

今天突然间想做一个用户数据同步的功能，同步过程中有个等待的时间，回调之后
弹出回调数据，感觉不太友好。layui 有个loading的内置组件，参考别人的来试试！

效果

在这里插入图片描述

JS：函数

        function showloading(t) {
   
            if (t
了解本专栏 订阅专栏 解锁全文 超级会员免费看
LayUI之项目（下）
weixin_66202611的博客
07-23 487
效果图》加了自定义模板后的数据。
LayUI中的基本元素之弹层组件文档（LayUI最广泛运用元素）
daimeijin的博客
08-13 1384
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 弹层组件文档 layer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web
layui loading
qq_52140056的博客
11-03 6486
1.首先确定layui 1-1.引入layui.js等所需，或者在项目里layui.use(['layui','jquery'],function(){})等，先排除粗心大意造成的问题 2.直接上代码 layui.use(['layer', 'form', 'table', 'admin', 'ax', 'func','jquery'], function () { var $ = layui.jquery; var table=layui.table; va...
layer_loading插件
10-18
简单炫酷的加载loading动画，非常适合使用在延迟加载中，效果非常好！！
layui loading窗口
热门推荐
老夫的少女心
09-29 1万+
引入js <link href="../scripts/layui/css/layui.css" rel="stylesheet" /> <script src="../scripts/layui/layui.all.js"></script> 首先定义一个fales true function showloading(t) { ..
layui实现请求前添加一个加载 loading 的效果，并在请求成功后关闭
yookooi
04-10 6648
使用 layui 的 layer 组件来实现请求前添加一个加载 loading 的效果，并在请求成功后关闭。
layui中使用loading
Wangyanan3351的博客
11-25 2873
在上传文件中: 在before回调或者是choose回调中加入:layer.load(1) 在done的回调中加入:layer.closeAll(‘loading’) 在ajax的请求中: 在xhr.open()之前就开始加入: layer.load(1) //load后的参数可以是空,也可以是0-2,代表的是不同的加载样式 在xhr.onload()中加入: layer.closeAll(‘...
layui: layer.open加载窗体时出现遮罩层的解决方法
10-16
其中，`layer.open` 是 Layui 提供的一个用于弹出对话框的方法，它可以创建各种类型的窗口，如信息提示、页面层、iframe 层、加载层和提示层。然而，在实际使用过程中，用户可能会遇到一个问题，即在使用 `layer....
layui常用弹窗和qrcode二维码生成
qq_43206800的博客
10-21 5925
框架前的前端补充 二维码生成 下载资源文件 步骤: 1. 引入Jquery.js文件 2. 引入jquery.qrcode.js文件 3. 引入支持中文的编码js文件 (utf.js) 4. 在网页中编写一个div 用于显示二维码 <div id="div1"></div> 5. 准备二维码的规格对象(JSON) var config = { width:数字,//值是
layui加载数据显示loading加载完成loading消失的实例代码
10-16
今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layer2.0-web弹层组件，confirm询问，loading加载
10-10
ayer是一款近年来口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。 layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String }); layer.open({ type: 1, content: $('#id') //这里content是一个DOM }); //Ajax获取 $.post('url', {}, function(str){ layer.open({ type: 1, content: str //注意，如果str是object，那么需要字符拼接。 }); });
layui -- loading实现加载中效果
微雨醉桃花的博客
06-23 9045
layui-- loading实现加载中效果
layui框架 loading组件的使用总结
前后端杂货铺
01-17 3691
layui中文离线文档及版本源码 layui框架 loading插件的使用总结 1、第一种：使用layer.open(); /开始执行程序 某代码块{ var Tip = layer.open({ shadeClose: false ,type: 2 ,content: '发布中...' }); //加载执行某段程序...... //执行程序结束 layer.close(Tip); }
6-给layui.open加loading简单示例
最新发布
weixin_46675693的博客
05-31 1958
一般情况下，可以直接使用layui中的load()方法，但是该方法的展示范围为整页面，如果展示的内容是居中展示，则不影响，不过需要自行给layui.open的内容区域加遮罩层。前提条件：由于layui.open中展示的内容从后台获取，但获取较慢，体验不好，故需要加一个loading，等待获取到数据后才能操作内容。用上后发现，loading不动了，查了资料后发现用法有问题，对于动态图标，需要使用layui封装的动画样式，如。等到数据获取后，在请求的回调中隐藏loading即可。
layui弹层使用
ly_490380384的博客
06-05 280
layui confirm layer.confirm('是否要删除信息!', { btn: ['确定', '取消'] }, function (index, layero) { //移除元素 ...
layui loading加载
qq_43024877的博客
10-31 1147
项目场景 layui loading加载： @Override var loading = layer.msg('信息获取中', {icon: 16, shade: 0.3, time:0}); //定义并执行loading $.post('{:url("index/Saas/mess8")}?type=ocr', {data:result,types:'back'}, function (e) {
layui里面的loading加载层自定义文字（两种方式）
苏木瑾
09-16 6508
方法一 //loading层 var index = layer.load(2, { //icon0-2 加载中,页面显示不同样式 shade: [0.4, '#000'], //0.4为透明度 ，#000 为颜色 content: '加载中...', success: function (layero) { layero.find('.layui-l...
layui的全屏loading
10-11
您可以使用layui的`layer`模块来实现全屏loading效果。首先，您需要引入layui的相关文件，然后使用`layer.load()`函数来显示loading层，设置`shade: [0.6, '#fff']`来设置遮罩层样式，使其半透明，并且背景色为白色。最后，在需要隐藏loading层的地方调用`layer.closeAll('loading')`即可隐藏loading层。 以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css"> </head> <body> <!-- 其他内容 --> <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script> <script> // 显示loading层 var loadingIndex = layer.load(0, { shade: [0.6, '#fff'] }); // 模拟请求延迟 setTimeout(function() { // 隐藏loading层 layer.closeAll('loading'); // 其他操作 }, 2000); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

厦门德仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值