本文介绍如何在嵌套容器中实现独立、互不干扰的动态加载状态（如多级 loading 层），通过为每个 loading 添加唯一标识（loading=”name”）并基于该属性精准控制显示/复用，彻底解决父子容器间 loading 覆盖、重复创建与隐藏失效等问题。
在构建复杂 Web 应用时，常需对不同区域（如主视图、弹窗、上传模块）分别展示加载状态。但若多个 loading 共享同一 css 类（如 .webappModal__loading），且未做作用域隔离，就极易出现「父 loading 显示时子 loading 无法触发」「多次点击导致重复插入 loading dom」或「隐藏逻辑误操作上级 loading」等典型问题——正如原始代码中点击“loading upload image”后，因 #upload 内部无 .webAppModal__loading 元素，showLoading() 会向上查找并意外复用 #main 下的 loading，造成逻辑混乱。
核心思路：用语义化属性替代层级依赖
不再依赖 CSS 选择器（如 > .webAppModal__loading）或 DOM 树深度判断，而是为每个 loading 绑定唯一业务标识（如 loading=”main” 或 loading=”upload”）。这样无论元素嵌套多深，都能通过 [loading=”xxx”] 精准定位、独立管理。
✅ 改进后的关键实践：
-
调用方式升级：传入业务名称 + 容器选择器
-
加载逻辑重构（支持按名查找 & 懒创建）
function showLoading(name, element, time = 450) { // 优先查找已存在的同名 loading const $existing = $(`[loading="${name}"]`); if ($existing.length > 0) { fadeIn($existing.get()[0], time); return; } // 否则创建新 loading 并注入目标容器 const _div = document.createElement("div"); const _image = document.createElement("img"); _image.src = "https://minecart.com.br/assets/img/loading.gif"; _div.setAttribute("loading", name); // ← 唯一标识，用于后续精准控制 _div.className = "webApp-shopDefaultModalLoading webAppModal__loading"; _div.appendChild(_image); const $target = typeof element === "string" ? document.querySelector(element) : element; $target.appendChild(_div); // 递归确保显示（可选，此处仅作演示；实际建议移除递归，改用显式 fadeIn） fadeIn(_div, time); } -
样式保持不变，但作用域完全解耦
CSS 无需修改，所有 .webAppModal__loading 仍生效，但因 loading 属性隔离，#upload 内的 loading 不再受 #main 下同名类影响。
⚠️ 注意事项：
- 避免在 showLoading() 中递归调用自身（原示例存在潜在无限循环风险），应改为直接 fadeIn(_div)；
- 若需隐藏 loading，推荐封装 hideLoading(name) 方法：$([loading=”${name}”]).fadeOut();；
- 在单页应用中，建议结合组件生命周期（如 vue onUnmounted / react useEffect cleanup）自动清理 loading DOM，防止内存泄漏；
- 对于更复杂的场景（如全局遮罩 + 局部 loading 共存），可扩展 z-index 策略或添加 data-loading-scope=”local/global” 属性分级控制。
通过为 loading 添加语义化命名，我们把「位置依赖」转化为「标识驱动」，既提升代码可维护性，又从根本上规避了嵌套结构下的状态冲突——这是动态加载组件设计中一项简单却至关重要的工程实践。