多Preloader问题：页面预加载器消失后表单预加载器SVG丢失

我一眼就发现了问题的核心——你的两个SVG里重复使用了同一个ID fill！HTML要求页面内的ID必须是唯一的，浏览器只会解析第一个出现的#fill渐变。当你隐藏第一个页面预加载器时，这个渐变元素也被移除或隐藏了，第二个表单预加载器的SVG找不到对应的渐变，自然就显示不出来了。

除此之外，你的CSS里#status和#status_form设置了height: 0，这也会导致SVG容器的高度为0，虽然用了top:50%，但实际显示可能会出问题，也需要调整。

下面是具体的修复步骤：

1. 修复SVG的ID冲突 #

把第二个预加载器的渐变ID改成唯一值，比如fill_form，同时更新path的fill属性指向这个新ID：

<div id="preloader_form">
  <div id="status_form">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 74.4 81.9" width="300" height="300" xml:space="preserve">
      <!-- 修改渐变ID为fill_form -->
      <linearGradient id="fill_form" x1="0.5" y1="1" x2="0.5" y2="0">
        <stop offset="0%" stop-color="#76B442">
          <animate attributeName="stop-color" values="#76B442; #A7A8AA; #76B442" dur="1s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="100%" stop-color="#A7A8AA">
          <animate attributeName="stop-color" values="#A7A8AA; #76B442; #A7A8AA" dur="1s" repeatCount="indefinite"></animate>
        </stop>
      </linearGradient>
      <!-- 更新fill指向新的ID -->
      <path fill="url(#fill_form)" d="M1.9,79.4c-1.5-1.5,0.3-4.7,8.2-14.2c4.8-5.7,10.1-12.3,11.9-14.6l3.3-4.1l-1.6-1.7 c-7.2-7.4-8.6-20.6-3-29.7C27.9,3.4,43.8-1.4,56.8,4.2c6,2.6,11.8,8,14.4,13.5c2.7,5.6,2.5,15.4-0.4,21.1 c-6.6,13-22.8,18.9-36.3,13.3c-2.2-1-4.1-1.3-4.4-1c-0.3,0.4-5.8,7-12.2,14.8C8.8,76.8,5.7,80,4.3,80C3.3,80,2.1,79.7,1.9,79.4 L1.9,79.4z M53.5,48.8c5.7-2,10.7-6.3,13.4-11.3c2.8-5.2,2.9-13.8,0.1-18.9c-4.5-8.4-12-12.8-21.9-12.8c-26.3,0-33.2,33.2-9,42.7 C42.2,50.9,47.3,51,53.5,48.8L53.5,48.8z"></path>
    </svg>
  </div>
</div>

2. 调整CSS的高度问题 #

把#status和#status_form的height: 0改成height: 100%，这样容器能占满父元素的高度，确保SVG能正确居中显示：

#preloader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 120;
}
#preloader_form {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 110;
  /* 注意：表单容器需要设置为相对定位，否则absolute会相对于整个页面定位 */
}
#status, #status_form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; /* 把0改成100% */
  position: absolute;
  top: 0; /* 去掉top:50%，flex已经能实现居中 */
}

3. 确保独立控制两个预加载器的显示/隐藏 #

你需要用JavaScript分别控制两个预加载器的状态，比如页面加载完成后隐藏页面预加载器，表单提交时显示表单预加载器：

// 页面加载完成后隐藏页面预加载器
window.addEventListener('load', function() {
  document.getElementById('preloader').style.display = 'none';
});

// 表单提交时显示表单预加载器
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交，根据你的业务需求调整
  document.getElementById('preloader_form').style.display = 'block';
  
  // 这里写表单提交逻辑，比如AJAX请求
  // 请求完成后隐藏表单预加载器
  // 示例：模拟请求完成
  setTimeout(() => { 
    document.getElementById('preloader_form').style.display = 'none'; 
  }, 2000);
});

这样修改后，两个预加载器就能独立工作，不会再互相影响了。

内容的提问来源于stack exchange，提问作者Nathan Cheval