0

0

layui layer loading加载层 layui如何显示和关闭加载动画

煙雲

煙雲

发布时间:2026-03-16 19:15:11

|

391人浏览过

|

来源于php中文网

原创

layer.load() 返回数字索引,必须保存并在对应回调中调用 layer.close() 手动关闭;不可依赖 layer.closeAll('loading') 或 ajaxSetup 统一处理,应按需在 success/fail/done 等明确生命周期钩子中控制。

layer.load() 返回值必须保存,否则关不掉

很多人调用 layer.load() 后发现 loading 一直转,页面卡死——根本原因是没拿到返回值,后续没法调 layer.close()。layui 的 loading 层**不会自动关闭**,必须手动关,而且得关对那个实例。

  • layer.load() 返回的是一个数字索引(比如 12345),不是 DOM 节点,不能靠 class 或 id 去找
  • 如果在异步回调里想关,但变量作用域不对(比如定义在 if 里、没提升到外层),就会关错或报错 Cannot read property 'close' of undefined
  • 别用 layer.closeAll('loading') 图省事:它会干掉所有 loading,包括其他模块正在用的,容易引发竞态问题

正确做法是把索引存到外层变量或闭包里,确保 success/error 回调能访问到:

let loadingIndex;<br>$('#submitBtn').on('click', function() {<br>  loadingIndex = layer.load(1, { shade: [0.3, '#000'] });<br>  $.post('/api/save', data, function(res) {<br>    layer.close(loadingIndex);<br>    layer.msg('保存成功');<br>  }).fail(function() {<br>    layer.close(loadingIndex);<br>    layer.msg('保存失败');<br>  });<br>});

全局 AJAX 加载动画要慎用 $.ajaxSetup

$.ajaxSetup({ beforeSend: ... }) 统一加 loading 看似方便,但实际埋雷不少:它会影响所有 AJAX 请求,包括 layui 内部调用(如 table.render 的分页请求)、第三方插件、甚至浏览器扩展注入的请求。

  • 一旦某个请求没走 success/error(比如被拦截、超时未设 timeout、Promise 被 reject 但没 catch),loading 就永远挂着
  • $(document).ajaxStop() 不可靠:多个并发请求时,它可能在第一个请求结束就触发,导致 loading 提前关闭
  • 移动端弱网下,complete 钩子有时不执行,loading 残留概率更高

更稳的方式是「按需包裹」:只在你明确知道生命周期的业务请求里手动控制。比如表格加载用 done 回调关,表单提交用 success/fail 关,上传用 upload.on('done') 关。

自定义 loading 动画要注意 CSS 覆盖和路径问题

Layui 默认的 loading 是 SVG 动画,想换 GIF 或文字提示,得改两个地方:一是 layer 的 content 配置,二是图标样式。但直接改 .layui-layer-ico16 类容易失效,因为 layui 4.x 后部分版本用的是内联 base64 图标。

‎ Gemini Storybook
‎ Gemini Storybook

Google Gemini推出的AI绘本生成工具

下载
  • 推荐用 layer.load(1, { content: '处理中...' }) 配合 CSS 覆盖文字样式,比换图稳妥
  • 如果坚持用 GIF,路径必须相对于当前 HTML 页面,不是相对于 JS 文件;用相对路径时建议写成 ./img/loading.gif,避免被构建工具误处理
  • 别在 success 回调里用 layero.find() 改样式——这个钩子只在 layer 初始化时触发一次,数据回来再改无效

table 表格加载时的 loading 必须配 done 回调关

很多人以为给 table.render() 加了 loading: true 就万事大吉,其实这只是开启「翻页时的内置 loading」,首次渲染或重载(table.reload())并不会自动触发,得自己补。

  • 首次加载:必须在 render 前手动 layer.load(),并在 done 里关
  • reload 场景:table.reload() 不会触发 done,得监听 done 的第二个参数 res 是否为真实数据,或者用 where 变更触发重载时,在 before 钩子里开 loading(需自行维护状态)
  • 注意:done 是在数据返回后、表格 DOM 渲染完才执行,所以在这里关 loading 是安全的;若在 parseData 里关,表格还没画出来,用户会看到空白闪一下

复杂点在于异步操作嵌套多层时,loading 的开/关时机容易错位——比如先开 loading,再发请求,请求里又调另一个接口,结果外层关了,里层还在转。这种时候得用计数器或 Promise.all,而不是依赖单一索引。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

166

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

170

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

124

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

260

2024.09.24

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

847

2023.08.22

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

513

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

384

2023.10.25

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2003

2023.10.19

chatgpt使用指南
chatgpt使用指南

本专题整合了chatgpt使用教程、新手使用说明等等相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.03.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号