本文介绍如何在嵌套 dom 结构中为不同层级的容器独立管理 loading 状态，通过为每个 loading 添加唯一 `loading` 属性标识，避免父子 loading 冲突，实现精准显示与复用。

在构建复杂 Web 应用时，常需对多个区域（如主内容区、弹窗、上传模块）分别展示 loading 状态。若采用全局类名（如 .webAppModal__loading）直接查找并操作，极易因 DOM 嵌套关系导致误匹配——例如点击“upload”按钮时，本应仅激活 #upload 内的 loading，却因 #main 中已存在同名 class 元素而触发父级 loading 显示，造成视觉重叠与逻辑混乱。

核心解法是为每个 loading 实例绑定唯一上下文标识，而非依赖 CSS 类选择器的层级关系。解决方案采用自定义 HTML 属性 loading="xxx" 作为加载状态的语义化键名，并结合 jQuery 属性选择器精确定位：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<!-- 按钮调用传入唯一 name 和目标容器 -->
<button onclick="showLoading('main', '#main')">loading main</button>
<button onclick="showLoading('upload', '#upload')">loading upload image</button>

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 的冲突问题，是动态加载组件开发中的推荐实践。