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

在 Layui 折叠面板(layui-collapse)中,当某一个面板的内容需异步加载(比如通过 AJAX 获取富文本、表单或列表),而加载耗时明显时,直接留白或仅靠 loading 图标会显得突兀。此时应在**该面板的折叠内容区域内部**,精准展示一行或多行局部骨架屏,而非整个页面或整个 collapse 容器——关键在于“局部”和“按需控制”。
只对特定面板启用骨架,不干扰其他面板
每个 .layui-colla-item 是独立的折叠项,骨架屏必须绑定到具体面板的内容区(即 .layui-colla-content 内部),不能写在 collapse 根容器里。结构示例:
用户信息
注意:骨架 DOM 必须初始就存在,且仅放在需要延迟加载的面板内;其他静态面板无需任何骨架元素。
用 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;)确保骨架层不阻挡后续交互


















