讲师中心 微信公众号
AI工具推荐 视频效率加速

layui折叠面板怎么在面板内容加载较慢时展示局部骨架屏

浅宇姑娘_9202

浅宇姑娘_9202

发布时间:2026-11-05 11:27:28

|

900人浏览过

|

来源于php中文网

原创

应在特定面板的 .layui-colla-content 内部精准嵌入初始存在的骨架 DOM,点击标题时拦截首次展开、显示骨架并异步加载,成功后替换为真实内容,失败时降级为错误提示。

layui折叠面板怎么在面板内容加载较慢时展示局部骨架屏

在 Layui 折叠面板(layui-collapse)中,当某一个面板的内容需异步加载(比如通过 AJAX 获取富文本、表单或列表),而加载耗时明显时,直接留白或仅靠 loading 图标会显得突兀。此时应在**该面板的折叠内容区域内部**,精准展示一行或多行局部骨架屏,而非整个页面或整个 collapse 容器——关键在于“局部”和“按需控制”。

只对特定面板启用骨架,不干扰其他面板

每个 .layui-colla-item 是独立的折叠项,骨架屏必须绑定到具体面板的内容区(即 .layui-colla-content 内部),不能写在 collapse 根容器里。结构示例:


  

    

用户信息


    

      

    

  

注意:骨架 DOM 必须初始就存在,且仅放在需要延迟加载的面板内;其他静态面板无需任何骨架元素。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

用 beforeOpen 回调触发加载并显示骨架

Layui collapse 不提供原生 beforeOpen 钩子,但可通过事件监听 + 手动控制实现等效逻辑。推荐在点击标题时拦截首次展开行为:

  • 给目标面板标题加 data-load="user" 属性标识加载类型
  • 监听 .layui-colla-title 的 click 事件,若对应 content 为空且未加载过,则先 show 骨架、再发请求
  • 请求成功后,用 $(content).html(data) 替换骨架,再让 collapse 自动展开(调用 collapse.update() 或触发 click)

骨架样式要贴合内容区域尺寸,避免跳动

局部骨架必须复用真实内容的盒模型参数:

  • 设置 .skeleton-line 的 height、margin、line-height 与后续真实段落/输入框完全一致(例如表单项高 36px → 骨架高度也设为 36px)
  • 用 aspect-ratio: 4/3 控制图片类骨架比例,避免宽高不定导致重排
  • 动画用 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) + background-size: 200% 100% + animation 实现扫描光效

加载失败时及时降级为错误提示

骨架屏不是永久占位,必须有明确退出机制:

  • 请求超时或返回非 2xx 状态码时,隐藏骨架,显示「加载失败」文字 + 重试按钮
  • 不要保留骨架并无限等待,否则用户无法判断是否卡死
  • 可加一层透明遮罩(position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;)确保骨架层不阻挡后续交互

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2843

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6163

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7110

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6918

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

983

2024.05.22

ajax教程
ajax教程

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

3280

2023.06.14

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

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

360

2023.08.31

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

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

3093

2023.11.15

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn