如何使用原生JavaScript实现仅表单提交后显示加载Spinner

原有方案失效原因 #

• 同步表单提交时浏览器会在代码执行完成前就触发页面跳转，可能出现sessionStorage还没写入完成就已经重载页面，导致新页面读取不到标记
• window.load事件触发时机过晚，需要等待页面所有资源加载完成才执行，Spinner展示延迟严重，用户几乎感知不到加载状态
• 没有在使用后清除存储的标记，后续刷新页面会错误触发Spinner显示

方案1：同步提交（页面会跳转/重载场景） #

第一步：新增Spinner基础结构 #

<!-- 加载Spinner，默认隐藏 -->
<div id="loading-spinner" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
  <div style="width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
</div>
<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

第二步：编写控制逻辑 #

// 监听表单提交事件
document.querySelector('form').addEventListener('submit', function() {
  // 先写入提交标记，保证跳转前存储完成
  sessionStorage.setItem('formSubmitted', 'true');
  // 立即显示Spinner，用户点击提交后立刻能看到加载状态
  document.getElementById('loading-spinner').style.display = 'block';
});

// DOM结构加载完成就执行判断，比load事件早很多
window.addEventListener('DOMContentLoaded', function() {
  const isAfterSubmit = sessionStorage.getItem('formSubmitted') === 'true';
  if (isAfterSubmit) {
    // 清除标记，避免后续刷新重复触发
    sessionStorage.removeItem('formSubmitted');
    // 如果跳转后的新页面需要展示加载状态，这里可以保留显示，业务逻辑完成后再隐藏
    // 示例：模拟业务加载完成后隐藏
    // setTimeout(() => {
    //   document.getElementById('loading-spinner').style.display = 'none';
    // }, 1500)
  }
});

方案2：异步提交（无页面跳转场景） #

不需要借助sessionStorage，直接在提交生命周期里控制即可：

const form = document.querySelector('form');
const spinner = document.getElementById('loading-spinner');

form.addEventListener('submit', async function(e) {
  // 阻止默认同步提交跳转
  e.preventDefault();
  // 提交前显示Spinner
  spinner.style.display = 'block';
  
  try {
    const formData = new FormData(form);
    // 发起异步提交请求
    const response = await fetch(form.action, {
      method: form.method || 'POST',
      body: formData
    });
    const result = await response.json();
    // 自定义提交成功后的逻辑
    console.log('提交成功', result);
  } catch (error) {
    // 自定义提交失败后的逻辑
    console.error('提交失败', error);
  } finally {
    // 无论请求成功失败都隐藏Spinner
    spinner.style.display = 'none';
  }
});

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