本文介绍如何在嵌套 dom 结构中为不同层级的容器独立管理 loading 状态，通过为每个 loading 添加唯一 `loading` 属性标识，避免父子 loading 冲突，实现精准显示与复用。
在构建复杂 Web 应用时，常需对多个区域（如主内容区、弹窗、上传模块）分别展示 loading 状态。若采用全局类名（如 .webAppModal__loading）直接查找并操作，极易因 DOM 嵌套关系导致误匹配——例如点击“upload”按钮时，本应仅激活 #upload 内的 loading，却因 #main 中已存在同名 class 元素而触发父级 loading 显示，造成视觉重叠与逻辑混乱。
核心解法是为每个 loading 实例绑定唯一上下文标识，而非依赖 CSS 类选择器的层级关系。解决方案采用自定义 HTML 属性 loading="xxx" 作为加载状态的语义化键名，并结合 jQuery 属性选择器精确定位：
function showLoading(name, element, time = 450) {
// 优先查找已存在的、具有 matching '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;
if ($target) {
$target.appendChild(_div);
}
}⚠️ 注意事项：避免重复创建：每次调用前先检查 [loading="xxx"] 是否已存在，防止同一区域叠加多个 loading 层。DOM 作用域隔离：loading 属性值必须全局唯一（如 'main'、'upload'），不依赖父容器 ID 或 class，确保跨组件复用安全。兼容性保障：使用 $(...).get()[0] 获取原生 DOM 节点以适配 fadeIn() 方法，同时保持 jQuery 的链式便利性。可扩展性设计：后续如需隐藏 loading，可封装 hideLoading(name) 方法，同样基于属性精准移除。
该方案摒弃了脆弱的 CSS 选择器路径（如 > .webAppModal__loading），转而以数据驱动的方式管理 UI 状态，既提升代码可维护性，也从根本上解决了嵌套 loading 的冲突问题，是动态加载组件开发中的推荐实践。
